@jenesei-software/jenesei-kit-react 1.3.8 → 1.3.10

package/build/component-DJYgewYg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-DJYgewYg.js","sources":["../src/components/button/component.styles.ts","../src/components/button/component.tsx"],"sourcesContent":["import { addRippleDefault } from '@local/components/ripple';\nimport { addSXTypography } from '@local/components/typography';\nimport { addFont, addOutline, addTransition } from '@local/styles/add';\nimport { addSX } from '@local/styles/sx';\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\n\nimport { StyledDollarButtonIconsWrapperProps, StyledDollarButtonProps } from '.';\n\n/****************************************** Genre *************************************************/\nconst ButtonGenre = css<StyledDollarButtonProps>`\n  ${(props) => css`\n    background: ${props.theme.colors.button[props.$genre].background.rest};\n    border-color: ${props.theme.colors.button[props.$genre].border.rest};\n    color: ${props.theme.colors.button[props.$genre].color.rest};\n    &:hover {\n      ${\n        (!props.$isHidden || props.$isNotHoverEffect) &&\n        css`\n        background: ${props.theme.colors.button[props.$genre].background.hover};\n        border-color: ${props.theme.colors.button[props.$genre].border.hover};\n        color: ${props.theme.colors.button[props.$genre].color.hover};\n      `\n      }\n    }\n  `};\n`;\n\n/****************************************** Disabled *************************************************/\nconst ButtonDisabled = css<StyledDollarButtonProps>`\n  ${(props) =>\n    props.$isHidden\n      ? css`\n          opacity: 0.5;\n          background: ${props.theme.colors.button[props.$genre].background.rest} !important;\n          color: ${props.theme.colors.button[props.$genre].color.rest} !important;\n        `\n      : css`\n          opacity: 1;\n        `}\n`;\n/****************************************** is HiddenBorder *************************************************/\nconst ButtonIsHiddenBorder = css<StyledDollarButtonProps>`\n  ${(props) =>\n    props.$isHiddenBorder &&\n    css`\n      border: 0px transparent !important;\n    `}\n`;\n/****************************************** is Radius *************************************************/\nconst ButtonIsRadius = css<StyledDollarButtonProps>`\n  ${(props) =>\n    props.$isRadius &&\n    css`\n      border-radius: 100px;\n    `}\n`;\n/****************************************** is PlaystationEffect *************************************************/\nconst ButtonIsPlaystationEffect = css<StyledDollarButtonProps>`\n  ${(props) =>\n    props.$isPlaystationEffect &&\n    css`\n      box-shadow: ${props.theme.effects.button};\n    `}\n`;\n/****************************************** Icons Wrapper *************************************************/\nexport const StyledButtonIconsWrapper = styled.div<StyledDollarButtonIconsWrapperProps>`\n  ${(props) =>\n    props.$isIconGroup\n      ? css`\n          display: flex;\n          gap: ${KEY_SIZE_DATA[props.$size].padding - 2}px;\n          align-items: center;\n          order: ${props.$iconGroupOrder || 'initial'};\n        `\n      : css`\n          display: contents;\n        `}\n`;\n\n/****************************************** Size *************************************************/\nexport const ButtonSize = css<StyledDollarButtonProps>`\n  ${(props) =>\n    ButtonSizeConstructor({\n      ...KEY_SIZE_DATA[props.$size],\n      isFullSize: props.$isFullSize,\n      isWidthAsHeight: props.$isWidthAsHeight,\n      isMinWidthAsContent: props.$isMinWidthAsContent,\n    })};\n`;\nexport const ButtonSizeConstructor = (\n  props: IThemeSizePropertyDefault & {\n    isFullSize?: boolean;\n    isWidthAsHeight?: boolean;\n    isMinWidthAsContent?: boolean;\n  },\n) => css`\n  height: fit-content;\n  min-height: ${props.height}px;\n  max-height: fit-content;\n  padding: 2px ${props.padding}px;\n  border-radius: ${props.radius}px;\n  gap: ${props.padding - 2}px;\n  ${() =>\n    props.isFullSize &&\n    css`\n      height: 100%;\n      width: 100%;\n      border-radius: 0px;\n    `};\n  ${\n    props.isWidthAsHeight &&\n    css`\n    width: ${props.height}px;\n    min-width: ${props.height}px;\n    padding: 0px;\n  `\n  };\n  ${\n    props.isMinWidthAsContent &&\n    css`\n    min-width: max-content;\n  `\n  };\n`;\n/****************************************** Border *************************************************/\nconst ButtonBorder = css`\n  border: 1px solid transparent;\n`;\n\n/****************************************** Flex *************************************************/\nconst ButtonFlex = css<StyledDollarButtonProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n/****************************************** Styled *************************************************/\nexport const StyledButton = styled(motion.button)<StyledDollarButtonProps>`\n  cursor: pointer;\n  user-select: none;\n\n  ${ButtonBorder};\n  ${ButtonSize};\n  ${ButtonGenre};\n  ${ButtonDisabled};\n  ${ButtonIsHiddenBorder};\n  ${ButtonIsRadius};\n  ${ButtonIsPlaystationEffect};\n  ${ButtonFlex};\n  ${addRippleDefault};\n  ${addTransition};\n  ${addFont};\n  ${addOutline};\n  ${addSXTypography};\n  ${addSX};\n`;\n","import {\n  Icon,\n  TIconBustMarketNameString,\n  TIconCheckboxNameString,\n  TIconIdNameString,\n  TIconLoadingNameString,\n  TIconLogoNameString,\n  TIconRealEbailNameString,\n} from '@local/components/icon';\nimport { Ripple } from '@local/components/ripple';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { useMergeRefs } from '@floating-ui/react';\nimport { FC, Ref, useMemo, useRef } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ButtonProps, StyledButton, StyledButtonIconsWrapper } from '.';\n\nexport const Button: FC<ButtonProps> = (props) => {\n  const theme = useTheme();\n\n  const iconComponents = useMemo(\n    () =>\n      (props.icons ?? [])\n        ?.filter((icon) => !icon.isHidden)\n        ?.map((icon, index) =>\n          icon?.type === 'id' ? (\n            <Icon\n              key={`${icon.type}-${icon.name}-${index}`}\n              name={icon?.name as TIconIdNameString}\n              type='id'\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'logo' ? (\n            <Icon\n              key={`${icon.type}-${icon.name}-${index}`}\n              name={icon?.name as TIconLogoNameString}\n              type='logo'\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'bustmarket' ? (\n            <Icon\n              key={`${icon.type}-${icon.name}-${index}`}\n              name={icon?.name as TIconBustMarketNameString}\n              type='bustmarket'\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'checkbox' ? (\n            <Icon\n              key={`${icon.type}-${icon.name}-${index}`}\n              name={icon?.name as TIconCheckboxNameString}\n              type='checkbox'\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'loading' ? (\n            <Icon\n              key={`${icon.type}-${icon.name}-${index}`}\n              name={icon?.name as TIconLoadingNameString}\n              type='loading'\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'realebail' ? (\n            <Icon\n              key={`${icon.type}-${icon.name}-${index}`}\n              name={icon?.name as TIconRealEbailNameString}\n              type='realebail'\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : null,\n        ),\n    [props.icons, props.size],\n  );\n\n  const handleClick: ButtonProps['onClick'] = (event) => {\n    if (!props.isDisabled && props.onClick) {\n      props.onClick(event);\n    }\n  };\n  const refDefault = useRef<HTMLButtonElement>(null);\n\n  const ref = useMergeRefs([refDefault, props.ref]);\n\n  return (\n    <StyledButton\n      $font={{\n        size: props.font?.size ?? KEY_SIZE_DATA[props.size].font,\n        weight: props.font?.weight ?? 700,\n        family: props.font?.family ?? theme.font.family,\n        height: props.font?.height,\n      }}\n      $isNotHoverEffect={props.isNotHoverEffect}\n      whileTap={props.isWhileTapEffect ? { scale: 0.9, transition: { duration: 0.01 } } : {}}\n      id={props.id}\n      tabIndex={props.tabIndex ?? 0}\n      $isFullSize={props.isFullSize}\n      $genre={props.genre}\n      $size={props.size}\n      $isDisabled={props.isDisabled}\n      $isDisabledOutline={props.isDisabled ?? props.isDisabledOutline}\n      $isOutlineBoxShadow={props.isOutlineBoxShadow}\n      $isReadOnly={props.isReadOnly}\n      $isMinWidthAsContent={props.isMinWidthAsContent}\n      $isWidthAsHeight={props.isWidthAsHeight}\n      $isRadius={props.isRadius}\n      $isHidden={props.isHidden}\n      $isPlaystationEffect={props.isPlaystationEffect}\n      $sxTypography={props.sxTypography}\n      $isHiddenBorder={props.isHiddenBorder || props.isPlaystationEffect}\n      disabled={props.isDisabled}\n      type={props.type ?? 'button'}\n      className={props.className}\n      onClick={handleClick}\n      onFocus={props.onFocus}\n      onMouseDown={props.onMouseDown}\n      ref={ref as Ref<HTMLButtonElement>}\n      $sx={props.sx}\n    >\n      <Ripple\n        color={theme.colors.checkbox[props.genre].color.rest}\n        isDisabled={props.isDisabled ?? props.isDisabledRipple}\n        isHidden={props.isHidden}\n      />\n\n      {!props.isOnlyIcon && <div style={{ order: 0, display: 'contents' }}>{props.children && props.children}</div>}\n      <StyledButtonIconsWrapper\n        $size={props.size}\n        $isIconGroup={props.isIconGroup}\n        $iconGroupOrder={'iconGroupOrder' in props ? props.iconGroupOrder : undefined}\n      >\n        {iconComponents}\n      </StyledButtonIconsWrapper>\n    </StyledButton>\n  );\n};\n"],"names":["_b","_a","jsx","jsxs"],"mappings":"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"}