@pikas-ui/button - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/button/Button.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');var _styles = require('@pikas-ui/styles');var _react = require('react');var _loader = require('@pikas-ui/loader');var _utilsjs = require('../utils.js');const F=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{xs:{padding:"4px 20px"},sm:{padding:"6px 30px"},md:{padding:"8px 40px"},lg:{padding:"12px 60px"},xl:{padding:"16px 80px"}},disabled:{true:{cursor:"not-allowed",opacity:.5}}}}),$=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"div::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),N=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),k=({LeftIcon:o,RightIcon:n,loading:r,children:e,css:t,contentColor:i,textTransform:p,gap:c})=>{const l=_styles.useTheme.call(void 0, );return l?_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment,{children:[_jsxruntime.jsx.call(void 0, N,{children:_jsxruntime.jsx.call(void 0, _loader.BeatLoader,{size:l.fontSizes["EM-XX-SMALL"].value,colorHex:i,loading:r})}),_jsxruntime.jsxs.call(void 0, $,{textTransform:p,gap:c,css:{opacity:r?0:1},children:[o?_jsxruntime.jsx.call(void 0, o,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _2 => _2.icon])}):null,_jsxruntime.jsx.call(void 0, "div",{children:e}),n?_jsxruntime.jsx.call(void 0, n,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _3 => _3.icon])}):null]})]}):null},G= exports.Button =_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,effect:i,onClick:p,children:c,gap:l,LeftIcon:T,RightIcon:x,outlined:f,width:m,maxWidth:y,minWidth:h,fontSize:g,textTransform:b,fontWeight:B,borderRadius:C,borderWidth:S,boxShadow:M,contentColor:d,contentColorHex:u,...R},v)=>{const a=_styles.useTheme.call(void 0, ),H=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([p, 'optionalCall', _4 => _4()])},[t,p,e]);if(!a)return null;const L=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{ref:v,onClick:H,disabled:e||t,effect:t?void 0:i,css:{br:C,fontWeight:`$${B}`,borderWidth:S,fontSize:`$${g}`,width:m,maxWidth:y,minWidth:h,boxShadow:M,..._utilsjs.getColors.call(void 0, {outlined:f,colorHex:L,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _5 => _5.button])},...R,children:k({LeftIcon:T,RightIcon:x,children:c,gap:l,loading:e,css:r,textTransform:b,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:f,contentColorHex:u,colorHex:n})})})});G.defaultProps={type:"button",disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};const _=_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,fontSize:i,effect:p,onClick:c,children:l,gap:T,LeftIcon:x,RightIcon:f,outlined:m,width:y,maxWidth:h,minWidth:g,textTransform:b,fontWeight:B,borderRadius:C,borderWidth:S,boxShadow:M,contentColor:d,contentColorHex:u,...R},v)=>{const a=_styles.useTheme.call(void 0, ),H=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([c, 'optionalCall', _6 => _6()])},[t,c,e]);if(!a)return null;const L=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{as:"a",ref:v,onClick:H,disabled:e||t,effect:t?void 0:p,css:{br:C,fontWeight:`$${B}`,borderWidth:S,fontSize:`$${i}`,width:y,maxWidth:h,minWidth:g,boxShadow:M,..._utilsjs.getColors.call(void 0, {outlined:m,colorHex:L,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _7 => _7.button])},...R,children:k({LeftIcon:x,RightIcon:f,children:l,gap:T,loading:e,css:r,textTransform:b,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:m,contentColorHex:u,colorHex:n})})})});_.defaultProps={disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};exports.Button = G; exports.ButtonLink = _;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');var _styles = require('@pikas-ui/styles');var _react = require('react');var _loader = require('@pikas-ui/loader');var _utilsjs = require('../utils.js');const F=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{xs:{padding:"4px 20px"},sm:{padding:"6px 30px"},md:{padding:"8px 40px"},lg:{padding:"12px 60px"},xl:{padding:"16px 80px"}},disabled:{true:{cursor:"not-allowed",opacity:.5}}}}),$=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"div::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),N=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),G=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center"}),k=({LeftIcon:o,RightIcon:n,loading:r,children:e,css:t,contentColor:i,textTransform:p,gap:c})=>{const l=_styles.useTheme.call(void 0, );return l?_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment,{children:[_jsxruntime.jsx.call(void 0, N,{children:_jsxruntime.jsx.call(void 0, _loader.BeatLoader,{size:l.fontSizes["EM-XX-SMALL"].value,colorHex:i,loading:r})}),_jsxruntime.jsxs.call(void 0, $,{textTransform:p,gap:c,css:{opacity:r?0:1},children:[o?_jsxruntime.jsx.call(void 0, o,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _2 => _2.icon])}):null,_jsxruntime.jsx.call(void 0, G,{children:e}),n?_jsxruntime.jsx.call(void 0, n,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _3 => _3.icon])}):null]})]}):null},j= exports.Button =_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,effect:i,onClick:p,children:c,gap:l,LeftIcon:x,RightIcon:y,outlined:f,width:m,maxWidth:h,minWidth:g,fontSize:b,textTransform:C,fontWeight:B,borderRadius:S,borderWidth:M,boxShadow:R,contentColor:d,contentColorHex:u,...v},H)=>{const a=_styles.useTheme.call(void 0, ),L=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([p, 'optionalCall', _4 => _4()])},[t,p,e]);if(!a)return null;const I=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{ref:H,onClick:L,disabled:e||t,effect:t?void 0:i,css:{br:S,fontWeight:`$${B}`,borderWidth:M,fontSize:`$${b}`,width:m,maxWidth:h,minWidth:g,boxShadow:R,..._utilsjs.getColors.call(void 0, {outlined:f,colorHex:I,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _5 => _5.button])},...v,children:k({LeftIcon:x,RightIcon:y,children:c,gap:l,loading:e,css:r,textTransform:C,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:f,contentColorHex:u,colorHex:n})})})});j.defaultProps={type:"button",disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};const _=_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,fontSize:i,effect:p,onClick:c,children:l,gap:x,LeftIcon:y,RightIcon:f,outlined:m,width:h,maxWidth:g,minWidth:b,textTransform:C,fontWeight:B,borderRadius:S,borderWidth:M,boxShadow:R,contentColor:d,contentColorHex:u,...v},H)=>{const a=_styles.useTheme.call(void 0, ),L=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([c, 'optionalCall', _6 => _6()])},[t,c,e]);if(!a)return null;const I=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{as:"a",ref:H,onClick:L,disabled:e||t,effect:t?void 0:p,css:{br:S,fontWeight:`$${B}`,borderWidth:M,fontSize:`$${i}`,width:h,maxWidth:g,minWidth:b,boxShadow:R,..._utilsjs.getColors.call(void 0, {outlined:m,colorHex:I,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _7 => _7.button])},...v,children:k({LeftIcon:y,RightIcon:f,children:l,gap:x,loading:e,css:r,textTransform:C,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:m,contentColorHex:u,colorHex:n})})})});_.defaultProps={disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};exports.Button = j; exports.ButtonLink = _;
 //# sourceMappingURL=Button.js.map

dist/button/Button.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/button/Button.tsx"],"names":["Fragment","jsx","jsxs","useTheme","styled","forwardRef","useCallback","BeatLoader","getColors","getContentColor","ButtonDOM","Content","LoadingContainer","getContent","LeftIcon","RightIcon","loading","children","css","contentColor","textTransform","gap","theme","Button","color","colorHex","disabled","effect","onClick","outlined","width","maxWidth","minWidth","fontSize","fontWeight","borderRadius","borderWidth","boxShadow","contentColorHex","props","ref","handleClick","colorHexFinal","contentColorHexFinal","ButtonLink"],"mappings":"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","sourcesContent":["import type {\n  ColorsType,\n  CSS,\n  FontsWeightsType,\n  BorderRadiusType,\n  FontsSizesType,\n  ShadowsType,\n} from '@pikas-ui/styles'\nimport { useTheme } from '@pikas-ui/styles'\nimport { styled } from '@pikas-ui/styles'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'\nimport React, { forwardRef, useCallback } from 'react'\nimport type { IconProps, IconCSSType } from '@pikas-ui/icons'\nimport { BeatLoader } from '@pikas-ui/loader'\nimport type {\n  ButtonTypeType,\n  ButtonEffectType,\n  ButtonGapType,\n  ButtonPaddingType,\n  ButtonTextTransformType,\n  ButtonTargetType,\n} from '../types.js'\nimport { getColors, getContentColor } from '../utils.js'\n\nconst ButtonDOM = styled('button', {\n  all: 'unset',\n  cursor: 'pointer',\n  outline: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  userSelect: 'none',\n  space: 2,\n  borderStyle: 'solid',\n  position: 'relative',\n  whiteSpace: 'nowrap',\n  boxSizing: 'border-box',\n\n  variants: {\n    effect: {\n      globalScale: {\n        transition: 'transform 250ms ease',\n\n        '&:hover': {\n          transform: 'scale(1.025)',\n          transition: 'transform 250ms ease',\n        },\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      boxScale: {\n        transition: 'transform 250ms ease',\n\n        '&:after': {\n          background: 'inherit',\n          content: '',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          zIndex: -1,\n          transition: 'transform 250ms ease',\n          borderRadius: 'inherit',\n        },\n\n        '&:hover:after': {\n          transform: 'scale(1.1)',\n          transition: 'transform 250ms',\n        },\n\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      opacity: {\n        transition: 'opacity 500ms',\n\n        '&:hover': {\n          opacity: 0.8,\n        },\n\n        '&:active': {\n          opacity: 1,\n          transition: 'opacity 0s',\n        },\n      },\n    },\n    padding: {\n      xs: {\n        padding: '4px 20px',\n      },\n      sm: {\n        padding: '6px 30px',\n      },\n      md: {\n        padding: '8px 40px',\n      },\n      lg: {\n        padding: '12px 60px',\n      },\n      xl: {\n        padding: '16px 80px',\n      },\n    },\n\n    disabled: {\n      true: {\n        cursor: 'not-allowed',\n        opacity: 0.5,\n      },\n    },\n  },\n})\n\nconst Content = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  variants: {\n    textTransform: {\n      capitalize: {\n        textTransform: 'capitalize',\n      },\n      uppercase: {\n        textTransform: 'uppercase',\n      },\n      default: {\n        'div::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n      none: {},\n    },\n\n    gap: {\n      sm: {\n        customGap: 4,\n      },\n      md: {\n        customGap: 8,\n      },\n      lg: {\n        customGap: 16,\n      },\n    },\n  },\n})\n\nconst LoadingContainer = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n})\n\nexport type ButtonCSSType = {\n  button?: CSS\n  icon?: IconCSSType\n}\n\nexport interface ButtonDefaultProps {\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  loading?: boolean\n  padding?: ButtonPaddingType\n  fontSize?: FontsSizesType\n  gap?: ButtonGapType\n  color?: ColorsType\n  colorHex?: string\n  contentColor?: ColorsType\n  contentColorHex?: string\n  textTransform?: ButtonTextTransformType\n  fontWeight?: FontsWeightsType\n  outlined?: boolean\n  effect?: ButtonEffectType\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  disabled?: boolean\n  width?: string | number\n  maxWidth?: string | number\n  minWidth?: string | number\n  borderRadius?: BorderRadiusType\n  borderWidth?: number\n  boxShadow?: ShadowsType | 'none'\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  type?: ButtonTypeType\n}\n\nexport interface ButtonLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  href?: string\n  target?: ButtonTargetType\n}\n\nconst getContent = ({\n  LeftIcon,\n  RightIcon,\n  loading,\n  children,\n  css,\n  contentColor,\n  textTransform,\n  gap,\n}: {\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  loading?: boolean\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  contentColor?: string\n  textTransform?: ButtonTextTransformType\n  gap?: ButtonGapType\n}): React.ReactNode => {\n  const theme = useTheme()\n\n  if (!theme) return null\n  return (\n    <>\n      <LoadingContainer>\n        <BeatLoader\n          size={theme.fontSizes['EM-XX-SMALL'].value}\n          colorHex={contentColor}\n          loading={loading}\n        />\n      </LoadingContainer>\n\n      <Content\n        textTransform={textTransform}\n        gap={gap}\n        css={{\n          opacity: loading ? 0 : 1,\n        }}\n      >\n        {LeftIcon ? (\n          <LeftIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n        <div>{children}</div>\n        {RightIcon ? (\n          <RightIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n      </Content>\n    </>\n  )\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      fontSize,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButton.defaultProps = {\n  type: 'button',\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n\nexport const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      fontSize,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        as=\"a\"\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButtonLink.defaultProps = {\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n"]}
+{"version":3,"sources":["../../src/button/Button.tsx"],"names":["Fragment","jsx","jsxs","useTheme","styled","forwardRef","useCallback","BeatLoader","getColors","getContentColor","ButtonDOM","Content","LoadingContainer","Children","getContent","LeftIcon","RightIcon","loading","children","css","contentColor","textTransform","gap","theme","Button","color","colorHex","disabled","effect","onClick","outlined","width","maxWidth","minWidth","fontSize","fontWeight","borderRadius","borderWidth","boxShadow","contentColorHex","props","ref","handleClick","colorHexFinal","contentColorHexFinal","ButtonLink"],"mappings":"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","sourcesContent":["import type {\n  ColorsType,\n  CSS,\n  FontsWeightsType,\n  BorderRadiusType,\n  FontsSizesType,\n  ShadowsType,\n} from '@pikas-ui/styles'\nimport { useTheme } from '@pikas-ui/styles'\nimport { styled } from '@pikas-ui/styles'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'\nimport React, { forwardRef, useCallback } from 'react'\nimport type { IconProps, IconCSSType } from '@pikas-ui/icons'\nimport { BeatLoader } from '@pikas-ui/loader'\nimport type {\n  ButtonTypeType,\n  ButtonEffectType,\n  ButtonGapType,\n  ButtonPaddingType,\n  ButtonTextTransformType,\n  ButtonTargetType,\n} from '../types.js'\nimport { getColors, getContentColor } from '../utils.js'\n\nconst ButtonDOM = styled('button', {\n  all: 'unset',\n  cursor: 'pointer',\n  outline: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  userSelect: 'none',\n  space: 2,\n  borderStyle: 'solid',\n  position: 'relative',\n  whiteSpace: 'nowrap',\n  boxSizing: 'border-box',\n\n  variants: {\n    effect: {\n      globalScale: {\n        transition: 'transform 250ms ease',\n\n        '&:hover': {\n          transform: 'scale(1.025)',\n          transition: 'transform 250ms ease',\n        },\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      boxScale: {\n        transition: 'transform 250ms ease',\n\n        '&:after': {\n          background: 'inherit',\n          content: '',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          zIndex: -1,\n          transition: 'transform 250ms ease',\n          borderRadius: 'inherit',\n        },\n\n        '&:hover:after': {\n          transform: 'scale(1.1)',\n          transition: 'transform 250ms',\n        },\n\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      opacity: {\n        transition: 'opacity 500ms',\n\n        '&:hover': {\n          opacity: 0.8,\n        },\n\n        '&:active': {\n          opacity: 1,\n          transition: 'opacity 0s',\n        },\n      },\n    },\n    padding: {\n      xs: {\n        padding: '4px 20px',\n      },\n      sm: {\n        padding: '6px 30px',\n      },\n      md: {\n        padding: '8px 40px',\n      },\n      lg: {\n        padding: '12px 60px',\n      },\n      xl: {\n        padding: '16px 80px',\n      },\n    },\n\n    disabled: {\n      true: {\n        cursor: 'not-allowed',\n        opacity: 0.5,\n      },\n    },\n  },\n})\n\nconst Content = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  variants: {\n    textTransform: {\n      capitalize: {\n        textTransform: 'capitalize',\n      },\n      uppercase: {\n        textTransform: 'uppercase',\n      },\n      default: {\n        'div::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n      none: {},\n    },\n\n    gap: {\n      sm: {\n        customGap: 4,\n      },\n      md: {\n        customGap: 8,\n      },\n      lg: {\n        customGap: 16,\n      },\n    },\n  },\n})\n\nconst LoadingContainer = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n})\n\nconst Children = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n})\n\nexport type ButtonCSSType = {\n  button?: CSS\n  icon?: IconCSSType\n}\n\nexport interface ButtonDefaultProps {\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  loading?: boolean\n  padding?: ButtonPaddingType\n  fontSize?: FontsSizesType\n  gap?: ButtonGapType\n  color?: ColorsType\n  colorHex?: string\n  contentColor?: ColorsType\n  contentColorHex?: string\n  textTransform?: ButtonTextTransformType\n  fontWeight?: FontsWeightsType\n  outlined?: boolean\n  effect?: ButtonEffectType\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  disabled?: boolean\n  width?: string | number\n  maxWidth?: string | number\n  minWidth?: string | number\n  borderRadius?: BorderRadiusType\n  borderWidth?: number\n  boxShadow?: ShadowsType | 'none'\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  type?: ButtonTypeType\n}\n\nexport interface ButtonLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  href?: string\n  target?: ButtonTargetType\n}\n\nconst getContent = ({\n  LeftIcon,\n  RightIcon,\n  loading,\n  children,\n  css,\n  contentColor,\n  textTransform,\n  gap,\n}: {\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  loading?: boolean\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  contentColor?: string\n  textTransform?: ButtonTextTransformType\n  gap?: ButtonGapType\n}): React.ReactNode => {\n  const theme = useTheme()\n\n  if (!theme) return null\n  return (\n    <>\n      <LoadingContainer>\n        <BeatLoader\n          size={theme.fontSizes['EM-XX-SMALL'].value}\n          colorHex={contentColor}\n          loading={loading}\n        />\n      </LoadingContainer>\n\n      <Content\n        textTransform={textTransform}\n        gap={gap}\n        css={{\n          opacity: loading ? 0 : 1,\n        }}\n      >\n        {LeftIcon ? (\n          <LeftIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n        <Children>{children}</Children>\n        {RightIcon ? (\n          <RightIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n      </Content>\n    </>\n  )\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      fontSize,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButton.defaultProps = {\n  type: 'button',\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n\nexport const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      fontSize,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        as=\"a\"\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButtonLink.defaultProps = {\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n"]}

dist/button/Button.mjs

@@ -1,2 +0,2 @@
-import{Fragment as j,jsx as s,jsxs as O}from"react/jsx-runtime";import{useTheme as I}from"@pikas-ui/styles";import{styled as P}from"@pikas-ui/styles";import{forwardRef as w,useCallback as z}from"react";import{BeatLoader as D}from"@pikas-ui/loader";import{getColors as A,getContentColor as E}from"../utils.js";const F=P("button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{xs:{padding:"4px 20px"},sm:{padding:"6px 30px"},md:{padding:"8px 40px"},lg:{padding:"12px 60px"},xl:{padding:"16px 80px"}},disabled:{true:{cursor:"not-allowed",opacity:.5}}}}),$=P("div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"div::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),N=P("div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),k=({LeftIcon:o,RightIcon:n,loading:r,children:e,css:t,contentColor:i,textTransform:p,gap:c})=>{const l=I();return l?O(j,{children:[s(N,{children:s(D,{size:l.fontSizes["EM-XX-SMALL"].value,colorHex:i,loading:r})}),O($,{textTransform:p,gap:c,css:{opacity:r?0:1},children:[o?s(o,{size:"1em",colorHex:i,css:t?.icon}):null,s("div",{children:e}),n?s(n,{size:"1em",colorHex:i,css:t?.icon}):null]})]}):null},G=w(({color:o,colorHex:n,css:r,loading:e,disabled:t,effect:i,onClick:p,children:c,gap:l,LeftIcon:T,RightIcon:x,outlined:f,width:m,maxWidth:y,minWidth:h,fontSize:g,textTransform:b,fontWeight:B,borderRadius:C,borderWidth:S,boxShadow:M,contentColor:d,contentColorHex:u,...R},v)=>{const a=I(),H=z(()=>{t||e||p?.()},[t,p,e]);if(!a)return null;const L=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return s(F,{ref:v,onClick:H,disabled:e||t,effect:t?void 0:i,css:{br:C,fontWeight:`$${B}`,borderWidth:S,fontSize:`$${g}`,width:m,maxWidth:y,minWidth:h,boxShadow:M,...A({outlined:f,colorHex:L,contentColorHex:W}),...r?.button},...R,children:k({LeftIcon:T,RightIcon:x,children:c,gap:l,loading:e,css:r,textTransform:b,contentColor:E({outlined:f,contentColorHex:u,colorHex:n})})})});G.defaultProps={type:"button",disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};const _=w(({color:o,colorHex:n,css:r,loading:e,disabled:t,fontSize:i,effect:p,onClick:c,children:l,gap:T,LeftIcon:x,RightIcon:f,outlined:m,width:y,maxWidth:h,minWidth:g,textTransform:b,fontWeight:B,borderRadius:C,borderWidth:S,boxShadow:M,contentColor:d,contentColorHex:u,...R},v)=>{const a=I(),H=z(()=>{t||e||c?.()},[t,c,e]);if(!a)return null;const L=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return s(F,{as:"a",ref:v,onClick:H,disabled:e||t,effect:t?void 0:p,css:{br:C,fontWeight:`$${B}`,borderWidth:S,fontSize:`$${i}`,width:y,maxWidth:h,minWidth:g,boxShadow:M,...A({outlined:m,colorHex:L,contentColorHex:W}),...r?.button},...R,children:k({LeftIcon:x,RightIcon:f,children:l,gap:T,loading:e,css:r,textTransform:b,contentColor:E({outlined:m,contentColorHex:u,colorHex:n})})})});_.defaultProps={disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};export{G as Button,_ as ButtonLink};
+import{Fragment as U,jsx as s,jsxs as O}from"react/jsx-runtime";import{useTheme as P}from"@pikas-ui/styles";import{styled as T}from"@pikas-ui/styles";import{forwardRef as w,useCallback as z}from"react";import{BeatLoader as D}from"@pikas-ui/loader";import{getColors as A,getContentColor as E}from"../utils.js";const F=T("button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{xs:{padding:"4px 20px"},sm:{padding:"6px 30px"},md:{padding:"8px 40px"},lg:{padding:"12px 60px"},xl:{padding:"16px 80px"}},disabled:{true:{cursor:"not-allowed",opacity:.5}}}}),$=T("div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"div::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),N=T("div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),G=T("div",{display:"flex",alignItems:"center",justifyContent:"center"}),k=({LeftIcon:o,RightIcon:n,loading:r,children:e,css:t,contentColor:i,textTransform:p,gap:c})=>{const l=P();return l?O(U,{children:[s(N,{children:s(D,{size:l.fontSizes["EM-XX-SMALL"].value,colorHex:i,loading:r})}),O($,{textTransform:p,gap:c,css:{opacity:r?0:1},children:[o?s(o,{size:"1em",colorHex:i,css:t?.icon}):null,s(G,{children:e}),n?s(n,{size:"1em",colorHex:i,css:t?.icon}):null]})]}):null},j=w(({color:o,colorHex:n,css:r,loading:e,disabled:t,effect:i,onClick:p,children:c,gap:l,LeftIcon:x,RightIcon:y,outlined:f,width:m,maxWidth:h,minWidth:g,fontSize:b,textTransform:C,fontWeight:B,borderRadius:S,borderWidth:M,boxShadow:R,contentColor:d,contentColorHex:u,...v},H)=>{const a=P(),L=z(()=>{t||e||p?.()},[t,p,e]);if(!a)return null;const I=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return s(F,{ref:H,onClick:L,disabled:e||t,effect:t?void 0:i,css:{br:S,fontWeight:`$${B}`,borderWidth:M,fontSize:`$${b}`,width:m,maxWidth:h,minWidth:g,boxShadow:R,...A({outlined:f,colorHex:I,contentColorHex:W}),...r?.button},...v,children:k({LeftIcon:x,RightIcon:y,children:c,gap:l,loading:e,css:r,textTransform:C,contentColor:E({outlined:f,contentColorHex:u,colorHex:n})})})});j.defaultProps={type:"button",disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};const _=w(({color:o,colorHex:n,css:r,loading:e,disabled:t,fontSize:i,effect:p,onClick:c,children:l,gap:x,LeftIcon:y,RightIcon:f,outlined:m,width:h,maxWidth:g,minWidth:b,textTransform:C,fontWeight:B,borderRadius:S,borderWidth:M,boxShadow:R,contentColor:d,contentColorHex:u,...v},H)=>{const a=P(),L=z(()=>{t||e||c?.()},[t,c,e]);if(!a)return null;const I=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return s(F,{as:"a",ref:H,onClick:L,disabled:e||t,effect:t?void 0:p,css:{br:S,fontWeight:`$${B}`,borderWidth:M,fontSize:`$${i}`,width:h,maxWidth:g,minWidth:b,boxShadow:R,...A({outlined:m,colorHex:I,contentColorHex:W}),...r?.button},...v,children:k({LeftIcon:y,RightIcon:f,children:l,gap:x,loading:e,css:r,textTransform:C,contentColor:E({outlined:m,contentColorHex:u,colorHex:n})})})});_.defaultProps={disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};export{j as Button,_ as ButtonLink};
 //# sourceMappingURL=Button.mjs.map

dist/button/Button.mjs.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["import type {\n  ColorsType,\n  CSS,\n  FontsWeightsType,\n  BorderRadiusType,\n  FontsSizesType,\n  ShadowsType,\n} from '@pikas-ui/styles'\nimport { useTheme } from '@pikas-ui/styles'\nimport { styled } from '@pikas-ui/styles'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'\nimport React, { forwardRef, useCallback } from 'react'\nimport type { IconProps, IconCSSType } from '@pikas-ui/icons'\nimport { BeatLoader } from '@pikas-ui/loader'\nimport type {\n  ButtonTypeType,\n  ButtonEffectType,\n  ButtonGapType,\n  ButtonPaddingType,\n  ButtonTextTransformType,\n  ButtonTargetType,\n} from '../types.js'\nimport { getColors, getContentColor } from '../utils.js'\n\nconst ButtonDOM = styled('button', {\n  all: 'unset',\n  cursor: 'pointer',\n  outline: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  userSelect: 'none',\n  space: 2,\n  borderStyle: 'solid',\n  position: 'relative',\n  whiteSpace: 'nowrap',\n  boxSizing: 'border-box',\n\n  variants: {\n    effect: {\n      globalScale: {\n        transition: 'transform 250ms ease',\n\n        '&:hover': {\n          transform: 'scale(1.025)',\n          transition: 'transform 250ms ease',\n        },\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      boxScale: {\n        transition: 'transform 250ms ease',\n\n        '&:after': {\n          background: 'inherit',\n          content: '',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          zIndex: -1,\n          transition: 'transform 250ms ease',\n          borderRadius: 'inherit',\n        },\n\n        '&:hover:after': {\n          transform: 'scale(1.1)',\n          transition: 'transform 250ms',\n        },\n\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      opacity: {\n        transition: 'opacity 500ms',\n\n        '&:hover': {\n          opacity: 0.8,\n        },\n\n        '&:active': {\n          opacity: 1,\n          transition: 'opacity 0s',\n        },\n      },\n    },\n    padding: {\n      xs: {\n        padding: '4px 20px',\n      },\n      sm: {\n        padding: '6px 30px',\n      },\n      md: {\n        padding: '8px 40px',\n      },\n      lg: {\n        padding: '12px 60px',\n      },\n      xl: {\n        padding: '16px 80px',\n      },\n    },\n\n    disabled: {\n      true: {\n        cursor: 'not-allowed',\n        opacity: 0.5,\n      },\n    },\n  },\n})\n\nconst Content = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  variants: {\n    textTransform: {\n      capitalize: {\n        textTransform: 'capitalize',\n      },\n      uppercase: {\n        textTransform: 'uppercase',\n      },\n      default: {\n        'div::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n      none: {},\n    },\n\n    gap: {\n      sm: {\n        customGap: 4,\n      },\n      md: {\n        customGap: 8,\n      },\n      lg: {\n        customGap: 16,\n      },\n    },\n  },\n})\n\nconst LoadingContainer = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n})\n\nexport type ButtonCSSType = {\n  button?: CSS\n  icon?: IconCSSType\n}\n\nexport interface ButtonDefaultProps {\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  loading?: boolean\n  padding?: ButtonPaddingType\n  fontSize?: FontsSizesType\n  gap?: ButtonGapType\n  color?: ColorsType\n  colorHex?: string\n  contentColor?: ColorsType\n  contentColorHex?: string\n  textTransform?: ButtonTextTransformType\n  fontWeight?: FontsWeightsType\n  outlined?: boolean\n  effect?: ButtonEffectType\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  disabled?: boolean\n  width?: string | number\n  maxWidth?: string | number\n  minWidth?: string | number\n  borderRadius?: BorderRadiusType\n  borderWidth?: number\n  boxShadow?: ShadowsType | 'none'\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  type?: ButtonTypeType\n}\n\nexport interface ButtonLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  href?: string\n  target?: ButtonTargetType\n}\n\nconst getContent = ({\n  LeftIcon,\n  RightIcon,\n  loading,\n  children,\n  css,\n  contentColor,\n  textTransform,\n  gap,\n}: {\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  loading?: boolean\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  contentColor?: string\n  textTransform?: ButtonTextTransformType\n  gap?: ButtonGapType\n}): React.ReactNode => {\n  const theme = useTheme()\n\n  if (!theme) return null\n  return (\n    <>\n      <LoadingContainer>\n        <BeatLoader\n          size={theme.fontSizes['EM-XX-SMALL'].value}\n          colorHex={contentColor}\n          loading={loading}\n        />\n      </LoadingContainer>\n\n      <Content\n        textTransform={textTransform}\n        gap={gap}\n        css={{\n          opacity: loading ? 0 : 1,\n        }}\n      >\n        {LeftIcon ? (\n          <LeftIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n        <div>{children}</div>\n        {RightIcon ? (\n          <RightIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n      </Content>\n    </>\n  )\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      fontSize,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButton.defaultProps = {\n  type: 'button',\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n\nexport const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      fontSize,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        as=\"a\"\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButtonLink.defaultProps = {\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n"],"mappings":"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","names":["Fragment","jsx","jsxs","useTheme","styled","forwardRef","useCallback","BeatLoader","getColors","getContentColor","ButtonDOM","Content","LoadingContainer","getContent","LeftIcon","RightIcon","loading","children","css","contentColor","textTransform","gap","theme","Button","color","colorHex","disabled","effect","onClick","outlined","width","maxWidth","minWidth","fontSize","fontWeight","borderRadius","borderWidth","boxShadow","contentColorHex","props","ref","handleClick","colorHexFinal","contentColorHexFinal","ButtonLink"]}
+{"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["import type {\n  ColorsType,\n  CSS,\n  FontsWeightsType,\n  BorderRadiusType,\n  FontsSizesType,\n  ShadowsType,\n} from '@pikas-ui/styles'\nimport { useTheme } from '@pikas-ui/styles'\nimport { styled } from '@pikas-ui/styles'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'\nimport React, { forwardRef, useCallback } from 'react'\nimport type { IconProps, IconCSSType } from '@pikas-ui/icons'\nimport { BeatLoader } from '@pikas-ui/loader'\nimport type {\n  ButtonTypeType,\n  ButtonEffectType,\n  ButtonGapType,\n  ButtonPaddingType,\n  ButtonTextTransformType,\n  ButtonTargetType,\n} from '../types.js'\nimport { getColors, getContentColor } from '../utils.js'\n\nconst ButtonDOM = styled('button', {\n  all: 'unset',\n  cursor: 'pointer',\n  outline: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  userSelect: 'none',\n  space: 2,\n  borderStyle: 'solid',\n  position: 'relative',\n  whiteSpace: 'nowrap',\n  boxSizing: 'border-box',\n\n  variants: {\n    effect: {\n      globalScale: {\n        transition: 'transform 250ms ease',\n\n        '&:hover': {\n          transform: 'scale(1.025)',\n          transition: 'transform 250ms ease',\n        },\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      boxScale: {\n        transition: 'transform 250ms ease',\n\n        '&:after': {\n          background: 'inherit',\n          content: '',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          zIndex: -1,\n          transition: 'transform 250ms ease',\n          borderRadius: 'inherit',\n        },\n\n        '&:hover:after': {\n          transform: 'scale(1.1)',\n          transition: 'transform 250ms',\n        },\n\n        '&:active': {\n          transform: 'scale(0.95)',\n          transition: 'transform 250ms ease',\n        },\n      },\n      opacity: {\n        transition: 'opacity 500ms',\n\n        '&:hover': {\n          opacity: 0.8,\n        },\n\n        '&:active': {\n          opacity: 1,\n          transition: 'opacity 0s',\n        },\n      },\n    },\n    padding: {\n      xs: {\n        padding: '4px 20px',\n      },\n      sm: {\n        padding: '6px 30px',\n      },\n      md: {\n        padding: '8px 40px',\n      },\n      lg: {\n        padding: '12px 60px',\n      },\n      xl: {\n        padding: '16px 80px',\n      },\n    },\n\n    disabled: {\n      true: {\n        cursor: 'not-allowed',\n        opacity: 0.5,\n      },\n    },\n  },\n})\n\nconst Content = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  variants: {\n    textTransform: {\n      capitalize: {\n        textTransform: 'capitalize',\n      },\n      uppercase: {\n        textTransform: 'uppercase',\n      },\n      default: {\n        'div::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n      none: {},\n    },\n\n    gap: {\n      sm: {\n        customGap: 4,\n      },\n      md: {\n        customGap: 8,\n      },\n      lg: {\n        customGap: 16,\n      },\n    },\n  },\n})\n\nconst LoadingContainer = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n})\n\nconst Children = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n})\n\nexport type ButtonCSSType = {\n  button?: CSS\n  icon?: IconCSSType\n}\n\nexport interface ButtonDefaultProps {\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  loading?: boolean\n  padding?: ButtonPaddingType\n  fontSize?: FontsSizesType\n  gap?: ButtonGapType\n  color?: ColorsType\n  colorHex?: string\n  contentColor?: ColorsType\n  contentColorHex?: string\n  textTransform?: ButtonTextTransformType\n  fontWeight?: FontsWeightsType\n  outlined?: boolean\n  effect?: ButtonEffectType\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  disabled?: boolean\n  width?: string | number\n  maxWidth?: string | number\n  minWidth?: string | number\n  borderRadius?: BorderRadiusType\n  borderWidth?: number\n  boxShadow?: ShadowsType | 'none'\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  type?: ButtonTypeType\n}\n\nexport interface ButtonLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    ButtonDefaultProps {\n  onClick?: () => void\n  color?: ColorsType\n  href?: string\n  target?: ButtonTargetType\n}\n\nconst getContent = ({\n  LeftIcon,\n  RightIcon,\n  loading,\n  children,\n  css,\n  contentColor,\n  textTransform,\n  gap,\n}: {\n  LeftIcon?: React.FC<IconProps>\n  RightIcon?: React.FC<IconProps>\n  loading?: boolean\n  children?: React.ReactNode\n  css?: ButtonCSSType\n  contentColor?: string\n  textTransform?: ButtonTextTransformType\n  gap?: ButtonGapType\n}): React.ReactNode => {\n  const theme = useTheme()\n\n  if (!theme) return null\n  return (\n    <>\n      <LoadingContainer>\n        <BeatLoader\n          size={theme.fontSizes['EM-XX-SMALL'].value}\n          colorHex={contentColor}\n          loading={loading}\n        />\n      </LoadingContainer>\n\n      <Content\n        textTransform={textTransform}\n        gap={gap}\n        css={{\n          opacity: loading ? 0 : 1,\n        }}\n      >\n        {LeftIcon ? (\n          <LeftIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n        <Children>{children}</Children>\n        {RightIcon ? (\n          <RightIcon size=\"1em\" colorHex={contentColor} css={css?.icon} />\n        ) : null}\n      </Content>\n    </>\n  )\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      fontSize,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButton.defaultProps = {\n  type: 'button',\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n\nexport const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n  (\n    {\n      color,\n      colorHex,\n      css,\n      loading,\n      disabled,\n      fontSize,\n      effect,\n      onClick,\n      children,\n      gap,\n      LeftIcon,\n      RightIcon,\n      outlined,\n      width,\n      maxWidth,\n      minWidth,\n      textTransform,\n      fontWeight,\n      borderRadius,\n      borderWidth,\n      boxShadow,\n      contentColor,\n      contentColorHex,\n      ...props\n    },\n    ref\n  ) => {\n    const theme = useTheme()\n\n    const handleClick = useCallback((): void => {\n      if (disabled || loading) {\n        return\n      }\n\n      onClick?.()\n    }, [disabled, onClick, loading])\n\n    if (!theme) return null\n\n    const colorHexFinal = colorHex || (color && theme.colors[color].value)\n    const contentColorHexFinal =\n      contentColorHex || (contentColor && theme.colors[contentColor].value)\n\n    return (\n      <ButtonDOM\n        as=\"a\"\n        ref={ref}\n        onClick={handleClick}\n        disabled={loading || disabled}\n        effect={disabled ? undefined : effect}\n        css={{\n          br: borderRadius,\n          fontWeight: `$${fontWeight}`,\n          borderWidth: borderWidth,\n          fontSize: `$${fontSize}`,\n          width: width,\n          maxWidth: maxWidth,\n          minWidth: minWidth,\n          boxShadow: boxShadow,\n\n          ...getColors({\n            outlined,\n            colorHex: colorHexFinal,\n            contentColorHex: contentColorHexFinal,\n          }),\n          ...css?.button,\n        }}\n        {...props}\n      >\n        {getContent({\n          LeftIcon,\n          RightIcon,\n          children,\n          gap,\n          loading,\n          css,\n          textTransform,\n          contentColor: getContentColor({\n            outlined,\n            contentColorHex: contentColorHex,\n            colorHex: colorHex,\n          }),\n        })}\n      </ButtonDOM>\n    )\n  }\n)\n\nButtonLink.defaultProps = {\n  disabled: false,\n  loading: false,\n  padding: 'md',\n  color: 'PRIMARY',\n  gap: 'md',\n  effect: 'opacity',\n  outlined: false,\n  width: '100%',\n  maxWidth: '100%',\n  fontSize: 'EM-MEDIUM',\n  textTransform: 'default',\n  fontWeight: 'NORMAL',\n  borderRadius: 'md',\n  borderWidth: 2,\n  boxShadow: 'ELEVATION_BOTTOM_1',\n}\n"],"mappings":"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","names":["Fragment","jsx","jsxs","useTheme","styled","forwardRef","useCallback","BeatLoader","getColors","getContentColor","ButtonDOM","Content","LoadingContainer","Children","getContent","LeftIcon","RightIcon","loading","children","css","contentColor","textTransform","gap","theme","Button","color","colorHex","disabled","effect","onClick","outlined","width","maxWidth","minWidth","fontSize","fontWeight","borderRadius","borderWidth","boxShadow","contentColorHex","props","ref","handleClick","colorHexFinal","contentColorHexFinal","ButtonLink"]}

package.json

 {
   "name": "@pikas-ui/button",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "private": false,
@@ -37,5 +37,5 @@ "description": "Components for creating buttons",
   "dependencies": {
-    "@pikas-ui/icons": "3.0.0",
-    "@pikas-ui/loader": "3.0.0",
-    "@pikas-ui/styles": "3.0.0",
+    "@pikas-ui/icons": "3.0.1",
+    "@pikas-ui/loader": "3.0.1",
+    "@pikas-ui/styles": "3.0.1",
     "font-color-contrast": "^11.1.0"
@@ -50,3 +50,3 @@ },
     "@pikas-ui/tsconfig": "0.0.0",
-    "@types/node": "^18.7.14",
+    "@types/node": "^18.7.15",
     "@types/react": "^18.0.18",
@@ -53,0 +53,0 @@ "@types/react-dom": "^18.0.6",

No alert changes

Improved metrics

Total package byte prevSize

94136

0.62%

Lines of code

247

0.82%

Dependency changes

• + Added

  @pikas-ui/icons@3.0.1
  (transitive)

• + Added

  @pikas-ui/loader@3.0.1
  (transitive)

• + Added

  @pikas-ui/styles@3.0.1
  (transitive)

• - Removed

  @pikas-ui/icons@3.0.0
  (transitive)

• - Removed

  @pikas-ui/loader@3.0.0
  (transitive)

• - Removed

  @pikas-ui/styles@3.0.0
  (transitive)

• Updated

  @pikas-ui/icons@3.0.1

• Updated

  @pikas-ui/loader@3.0.1

• Updated

  @pikas-ui/styles@3.0.1