UNPKG

@sertec/button

Version:

Sfera Button Component

github.com/jstarsky/sfera-components

jstarsky/sfera-components

770 lines (767 loc) • 60.5 kB

JavaScript

import { jsx, jsxs } from 'react/jsx-runtime'; import { useMemo, isValidElement, useState, useRef, useCallback, useEffect, createContext, useContext } from 'react'; function getBorderEnabled(border, find) { const borderSplit = border.split('-'); let borderTop = 'false'; if (border === 'full') { borderTop = 'true'; } else if (borderSplit.find((b) => b === find)) { borderTop = 'true'; } return borderTop === 'true'; } const rotate = (element, degrees) => { if (!element) return element; switch (degrees) { case '45': return jsx("span", { className: "rotate-45 !inline-flex !origin-center !h-fit !w-fit", children: element }); case '90': return jsx("span", { className: "rotate-90 !inline-flex !origin-center !h-fit !w-fit", children: element }); case '135': return (jsx("span", { className: "rotate-135 !inline-flex !origin-center !h-fit !w-fit", children: element })); case '180': return (jsx("span", { className: "rotate-180 !inline-flex !origin-center !h-fit !w-fit", children: element })); case '225': return (jsx("span", { className: "rotate-225 !inline-flex !origin-center !h-fit !w-fit", children: element })); case '270': return (jsx("span", { className: "rotate-270 !inline-flex !origin-center !h-fit !w-fit", children: element })); case '315': return (jsx("span", { className: "rotate-315 !inline-flex !origin-center !h-fit !w-fit", children: element })); default: return element; } }; const COMMON_CLASSNAMES = [ 'data-[font-variant=primary]:!text-primary', 'data-[font-variant=secondary]:!text-secondary', 'data-[font-variant=tertiary]:!text-tertiary', 'data-[font-variant=base]:!text-base', 'data-[font-variant=contrast]:!text-contrast', 'data-[font-variant=success]:!text-success', 'data-[font-variant=warning]:!text-warning', 'data-[font-variant=error]:!text-error', 'data-[font-variant=transparent]:!text-transparent', 'data-[font-variant=tab-not-active]:!text-base', ] .filter(Boolean) .join(' '); const NOT_OUTLINE_COMMON_CLASSNAMES = 'data-[menu-button=true]:!text-base'; const OUTLINE_COMMON_CLASSNAMES = [ '!border', 'bg-transparent', 'disabled:data-[disabledcss-disabled=false]:!text-disabled', 'disabled:data-[border-top=true]:!border-t-disabled', 'disabled:data-[border-right=true]:!border-r-disabled', 'disabled:data-[border-bottom=true]:!border-b-disabled', 'disabled:data-[border-left=true]:!border-l-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled', 'hover:disabled:data-[disabledcss-disabled=false]:!bg-transparent', 'hover:disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled', 'hover:disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled', 'hover:disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled', 'hover:disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled', ] .filter(Boolean) .join(' '); const COMMON_CLASSES = [ '!border', 'disabled:data-[disabledcss-disabled=false]:data-[font-variant=none]:data-[disabledcss-disabled=false]:!text-contrast', 'disabled:data-[disabledcss-disabled=false]:data-[disabledcss-disabled=false]:!bg-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled', 'disabled:data-[disabledcss-disabled=false]:hover:data-[hover-disabled=false]:!bg-disabled', 'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-top=true]:!border-t-disabled', 'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-right=true]:!border-r-disabled', 'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-bottom=true]:!border-b-disabled', 'hover:data-[disabledcss-disabled=false]:data-[hover-disabled=false]:disabled:data-[border-left=true]:!border-l-disabled', ] .filter(Boolean) .join(' '); const OUTLINE = [ { outline: true, variant: 'primary', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-primary', 'data-[border-top=true]:border-t-primary', 'data-[border-right=true]:border-r-primary', 'data-[border-bottom=true]:border-b-primary', 'data-[border-left=true]:border-l-primary', 'focus:data-[focus-disabled=false]:text-primary-hover', 'focus:data-[focus-disabled=false]:bg-primary-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-primary-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-primary-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-primary-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-primary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-primary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-primary-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-primary-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-primary-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-primary-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-primary-hover', 'active:data-[active-disabled=false]:!text-primary-active', 'active:data-[active-disabled=false]:!bg-primary-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-primary-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-primary-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-primary-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-primary-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:focus:!text-primary', 'data-[menu-button=true]:hover:!text-primary', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'primary', className: [ COMMON_CLASSES, 'bg-primary', 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-primary', 'data-[border-right=true]:border-r-primary', 'data-[border-bottom=true]:border-b-primary', 'data-[border-left=true]:border-l-primary', 'focus:data-[focus-disabled=false]:bg-primary-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-primary-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-primary-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-primary-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-primary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-primary-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-primary-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-primary-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-primary-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-primary-hover', 'active:data-[active-disabled=false]:!bg-primary-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-primary-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-primary-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-primary-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-primary-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'secondary', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-secondary', 'data-[border-top=true]:border-t-secondary', 'data-[border-right=true]:border-r-secondary', 'data-[border-bottom=true]:border-b-secondary', 'data-[border-left=true]:border-l-secondary', 'focus:data-[focus-disabled=false]:text-secondary-hover', 'focus:data-[focus-disabled=false]:bg-secondary-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-secondary-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-secondary-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-secondary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-secondary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-secondary-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-secondary-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-secondary-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-secondary-hover', 'active:data-[active-disabled=false]:!text-secondary-active', 'active:data-[active-disabled=false]:!bg-secondary-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-secondary-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-secondary-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-secondary-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-secondary-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:focus:!text-secondary', 'data-[menu-button=true]:hover:!text-secondary', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'secondary', className: [ COMMON_CLASSES, 'bg-secondary', 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-secondary', 'data-[border-right=true]:border-r-secondary', 'data-[border-bottom=true]:border-b-secondary', 'data-[border-left=true]:border-l-secondary', 'focus:data-[focus-disabled=false]:bg-secondary-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-secondary-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-secondary-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-secondary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-secondary-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-secondary-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-secondary-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-secondary-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-secondary-hover', 'active:data-[active-disabled=false]:!bg-secondary-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-secondary-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-secondary-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-secondary-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-secondary-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'tertiary', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-tertiary', 'data-[border-top=true]:border-t-tertiary', 'data-[border-right=true]:border-r-tertiary', 'data-[border-bottom=true]:border-b-tertiary', 'data-[border-left=true]:border-l-tertiary', 'focus:data-[focus-disabled=false]:text-tertiary-hover', 'focus:data-[focus-disabled=false]:bg-tertiary-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-tertiary-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tertiary-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tertiary-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tertiary-hover', 'active:data-[active-disabled=false]:!text-tertiary-active', 'active:data-[active-disabled=false]:!bg-tertiary-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tertiary-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tertiary-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tertiary-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tertiary-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:focus:!text-tertiary', 'data-[menu-button=true]:hover:!text-tertiary', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'tertiary', className: [ COMMON_CLASSES, 'bg-tertiary', 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-tertiary', 'data-[border-right=true]:border-r-tertiary', 'data-[border-bottom=true]:border-b-tertiary', 'data-[border-left=true]:border-l-tertiary', 'focus:data-[focus-disabled=false]:bg-tertiary-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-tertiary-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tertiary-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tertiary-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tertiary-hover', 'active:data-[active-disabled=false]:!bg-tertiary-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tertiary-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tertiary-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tertiary-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tertiary-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'base', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-base', 'data-[border-top=true]:border-t-base', 'data-[border-right=true]:border-r-base', 'data-[border-bottom=true]:border-b-base', 'data-[border-left=true]:border-l-base', 'focus:data-[focus-disabled=false]:text-base-hover', 'focus:data-[focus-disabled=false]:bg-base-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-base-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-base-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-base-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-base-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-base-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-base-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-base-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-base-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-base-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-base-hover', 'active:data-[active-disabled=false]:!text-base-active', 'active:data-[active-disabled=false]:!bg-base-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-base-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-base-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-base-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-base-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:focus:!text-base', 'data-[menu-button=true]:hover:!text-base', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'base', className: [ COMMON_CLASSES, 'bg-base', 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-base', 'data-[border-right=true]:border-r-base', 'data-[border-bottom=true]:border-b-base', 'data-[border-left=true]:border-l-base', 'focus:data-[focus-disabled=false]:bg-base-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-base-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-base-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-base-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-base-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-base-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-base-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-base-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-base-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-base-hover', 'active:data-[active-disabled=false]:!bg-base-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-base-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-base-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-base-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-base-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'contrast', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-contrast', 'data-[border-right=true]:border-r-contrast', 'data-[border-bottom=true]:border-b-contrast', 'data-[border-left=true]:border-l-contrast', 'focus:data-[focus-disabled=false]:text-contrast-hover', 'focus:data-[focus-disabled=false]:bg-contrast-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-contrast-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-contrast-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-contrast-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-contrast-hover', 'active:data-[active-disabled=false]:!text-contrast-active', 'active:data-[active-disabled=false]:!bg-contrast-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-contrast-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-contrast-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-contrast-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-contrast-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:focus:!text-secondary', 'data-[menu-button=true]:hover:!text-secondary', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'contrast', className: [ COMMON_CLASSES, 'bg-contrast', 'data-[font-variant=none]:text-base', 'data-[border-top=true]:border-t-contrast', 'data-[border-right=true]:border-r-contrast', 'data-[border-bottom=true]:border-b-contrast', 'data-[border-left=true]:border-l-contrast', 'focus:data-[focus-disabled=false]:bg-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-contrast-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-contrast-hover', 'active:data-[active-disabled=false]:!bg-contrast-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-contrast-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-contrast-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-contrast-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-contrast-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'success', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-success', 'data-[border-top=true]:border-t-success', 'data-[border-right=true]:border-r-success', 'data-[border-bottom=true]:border-b-success', 'data-[border-left=true]:border-l-success', 'focus:data-[focus-disabled=false]:text-success-hover', 'focus:data-[focus-disabled=false]:bg-success-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-success-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-success-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-success-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-success-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-success-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-success-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-success-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-success-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-success-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-success-hover', 'active:data-[active-disabled=false]:!text-success-active', 'active:data-[active-disabled=false]:!bg-success-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-success-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-success-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-success-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-success-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:hover:!text-success', 'data-[menu-button=true]:hover:!text-success', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'success', className: [ COMMON_CLASSES, 'bg-success', 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-success', 'data-[border-right=true]:border-r-success', 'data-[border-bottom=true]:border-b-success', 'data-[border-left=true]:border-l-success', 'focus:data-[focus-disabled=false]:bg-success-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-success-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-success-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-success-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-success-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-success-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-success-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-success-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-success-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-success-hover', 'active:data-[active-disabled=false]:!bg-success-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-success-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-success-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-success-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-success-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'warning', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-warning', 'data-[border-top=true]:border-t-warning', 'data-[border-right=true]:border-r-warning', 'data-[border-bottom=true]:border-b-warning', 'data-[border-left=true]:border-l-warning', 'focus:data-[focus-disabled=false]:text-warning-hover', 'focus:data-[focus-disabled=false]:bg-warning-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-warning-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-warning-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-warning-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-warning-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-warning-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-warning-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-warning-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-warning-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-warning-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-warning-hover', 'active:data-[active-disabled=false]:!text-warning-active', 'active:data-[active-disabled=false]:!bg-warning-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-warning-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-warning-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-warning-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-warning-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:hover:!text-warning', 'data-[menu-button=true]:hover:!text-warning', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'warning', className: [ COMMON_CLASSES, 'bg-warning', 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-warning', 'data-[border-right=true]:border-r-warning', 'data-[border-bottom=true]:border-b-warning', 'data-[border-left=true]:border-l-warning', 'focus:data-[focus-disabled=false]:bg-warning-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-warning-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-warning-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-warning-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-warning-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-warning-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-warning-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-warning-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-warning-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-warning-hover', 'active:data-[active-disabled=false]:!bg-warning-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-warning-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-warning-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-warning-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-warning-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'error', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-error', 'data-[border-top=true]:border-t-error', 'data-[border-right=true]:border-r-error', 'data-[border-bottom=true]:border-b-error', 'data-[border-left=true]:border-l-error', 'focus:data-[focus-disabled=false]:text-error-hover', 'focus:data-[focus-disabled=false]:bg-error-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-error-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-error-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-error-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-error-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-error-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-error-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-error-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-error-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-error-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-error-hover', 'active:data-[active-disabled=false]:!text-error-active', 'active:data-[active-disabled=false]:!bg-error-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-error-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-error-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-error-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-error-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:hover:!text-error', 'data-[menu-button=true]:hover:!text-error', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'error', className: [ COMMON_CLASSES, 'bg-error', 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-error', 'data-[border-right=true]:border-r-error', 'data-[border-bottom=true]:border-b-error', 'data-[border-left=true]:border-l-error', 'focus:data-[focus-disabled=false]:bg-error-hover', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-error-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-error-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-error-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-error-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-error-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-error-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-error-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-error-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-error-hover', 'active:data-[active-disabled=false]:!bg-error-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-error-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-error-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-error-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-error-active', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'transparent', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-contrast', 'data-[border-top=true]:border-t-contrast', 'data-[border-right=true]:border-r-contrast', 'data-[border-bottom=true]:border-b-contrast', 'data-[border-left=true]:border-l-contrast', 'focus:data-[focus-disabled=false]:text-contrast-hover', 'focus:data-[focus-disabled=false]:bg-transparent', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-contrast-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-contrast-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-contrast-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-contrast-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-contrast-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-contrast-hover', 'active:data-[active-disabled=false]:!text-contrast-active', 'active:data-[active-disabled=false]:!bg-contrast-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-contrast-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-contrast-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-contrast-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-contrast-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:focus:!text-contrast', 'data-[menu-button=true]:hover:!text-contrast', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'transparent', className: [ 'border', 'disabled:data-[disabledcss-disabled=false]:data-[font-variant=none]:data-[disabledcss-disabled=false]:!text-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[disabledcss-disabled=false]:!bg-transparent', 'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-top=true]:!border-t-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-right=true]:!border-r-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-bottom=true]:!border-b-disabled', 'disabled:data-[disabledcss-disabled=false]:data-[border-left=true]:!border-l-disabled', 'disabled:data-[disabledcss-disabled=false]:hover:data-[hover-disabled=false]:!bg-transparent', 'disabled:data-[disabledcss-disabled=false]:data-[font-variant=none]:data-[disabledcss-disabled=false]:!text-disabled', 'bg-transparent', 'data-[font-variant=none]:text-base', 'data-[border-top=true]:border-t-transparent', 'data-[border-right=true]:border-r-transparent', 'data-[border-bottom=true]:border-b-transparent', 'data-[border-left=true]:border-l-transparent', 'focus:data-[focus-disabled=false]:text-contrast-hover', 'focus:data-[focus-disabled=false]:bg-transparent', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-transparent', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-transparent', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-transparent', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-transparent', 'hover:data-[hover-disabled=false]:text-contrast-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-transparent', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-transparent', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-transparent', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-transparent', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-transparent', 'active:data-[active-disabled=false]:!text-contrast-active', 'active:data-[active-disabled=false]:!bg-transparent', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-transparent', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-transparent', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-transparent', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-transparent', ] .filter(Boolean) .join(' '), }, { outline: true, variant: 'tab-not-active', className: [ OUTLINE_COMMON_CLASSNAMES, 'data-[font-variant=none]:text-tab-not-active', 'data-[border-top=true]:border-t-tab-not-active', 'data-[border-right=true]:border-r-tab-not-active', 'data-[border-bottom=true]:border-b-tab-not-active', 'data-[border-left=true]:border-l-tab-not-active', 'focus:data-[focus-disabled=false]:text-tab-not-active-hover', 'focus:data-[focus-disabled=false]:bg-tab-not-active-hover/10', 'focus:data-[focus-disabled=false]:data-[border-top=true]:border-t-tab-not-active-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:text-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tab-not-active-hover/10', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover', 'active:data-[active-disabled=false]:!text-tab-not-active-active', 'active:data-[active-disabled=false]:!bg-tab-not-active-active/10', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tab-not-active-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tab-not-active-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tab-not-active-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tab-not-active-active', NOT_OUTLINE_COMMON_CLASSNAMES, 'data-[menu-button=true]:focus:!text-tab-not-active', 'data-[menu-button=true]:hover:!text-tab-not-active', ] .filter(Boolean) .join(' '), }, { outline: false, variant: 'tab-not-active', className: [ COMMON_CLASSES, 'bg-tab-not-active', 'data-[font-variant=none]:text-base', 'data-[border-top=true]:border-t-tab-not-active', 'data-[border-right=true]:border-r-tab-not-active', 'data-[border-bottom=true]:border-b-tab-not-active', 'data-[border-left=true]:border-l-tab-not-active', 'focus:data-[focus-disabled=false]:bg-tab-not-active-hover', 'focus:data-[focus-disabled=false]:border-t-tab-not-active-hover', 'focus:data-[focus-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover', 'focus:data-[focus-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover', 'focus:data-[focus-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[hover-bg-disabled=false]:bg-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[border-top=true]:border-t-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[border-bottom=true]:border-b-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[border-right=true]:border-r-tab-not-active-hover', 'hover:data-[hover-disabled=false]:data-[border-left=true]:border-l-tab-not-active-hover', 'active:data-[active-disabled=false]:!bg-tab-not-active-active', 'active:data-[active-disabled=false]:data-[border-top=true]:!border-t-tab-not-active-active', 'active:data-[active-disabled=false]:data-[border-bottom=true]:!border-b-tab-not-active-active', 'active:data-[active-disabled=false]:data-[border-right=true]:!border-r-tab-not-active-active', 'active:data-[active-disabled=false]:data-[border-left=true]:!border-l-tab-not-active-active', ] .filter(Boolean) .join(' '), }, ]; function Button({ variant = 'primary', size = 'md', outline = false, className, 'data-justify': justify = 'center', 'data-rounded': rounded = 'full', 'data-border': border = 'full', 'data-font-weight': weight = 'semibold', 'data-font-variant': fontVariant = 'none', 'data-menu-button': menuButton = 'false', 'data-footer-button': footerButton = 'false', 'data-active-disabled': activeDisabled = 'false', 'data-focus-disabled': focusDisabled = 'false', 'data-hover-disabled': hoverDisabled = 'false', 'data-hover-bg-disabled': hoverBgDisabled = 'false', 'data-padding-x-disabled': paddingXDisabled = 'false', 'data-padding-y-disabled': paddingYDisabled = 'false', 'data-disabledcss-disabled': disabledCssDisabled = 'false', ...props }) { const outlineClass = OUTLINE.find((i) => i.variant === variant && i.outline === outline)?.className || OUTLINE.find((i) => i.variant === 'primary' && i.outline === outline)?.className; return (jsx("button", { ...props, className: [ COMMON_CLASSNAMES, variant, outlineClass?.split(' ').filter(Boolean).join(' '), 'cursor-pointer', 'data-[font-weight=semibold]:font-semibold data-[font-weight=bold]:font-bold data-[font-weight=normal]:font-normal', 'data-[padding-x-disabled=false]:px-4',