{"version":3,"file":"ActionIcon.cjs","sources":["../../../src/components/ActionIcon/ActionIcon.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { Ripple, RippleProps, useRipple } from '@raikou/ripple';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  getRadius,\n  getSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  RaikouColor,\n  RaikouGradient,\n  RaikouRadius,\n  RaikouSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { ActionIconGroup } from './ActionIconGroup/ActionIconGroup';\nimport { ActionIconGroupSection } from './ActionIconGroupSection/ActionIconGroupSection';\nimport { ActionIconIconStyle, ActionIconLoaderStyle, ActionIconRootStyle } from './ActionIcon.css';\n\nexport type ActionIconVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'transparent'\n  | 'white'\n  | 'subtle'\n  | 'default'\n  | 'gradient';\n\nexport type ActionIconStylesNames = 'root' | 'loader' | 'icon';\nexport type ActionIconCssVariables = {\n  root:\n    | '--ai-radius'\n    | '--ai-size'\n    | '--ai-bg'\n    | '--ai-hover'\n    | '--ai-hover-color'\n    | '--ai-color'\n    | '--ai-bd';\n};\n\nexport interface ActionIconProps\n  extends BoxProps,\n    StylesApiProps<ActionIconFactory>,\n    Pick<ElementProps<'button'>, 'onClick'> {\n  'data-disabled'?: boolean;\n  __staticSelector?: string;\n\n  /** Determines whether `Loader` component should be displayed instead of the `children`, `false` by default */\n  loading?: boolean;\n\n  /** Props added to the `Loader` component (only visible when `loading` prop is set) */\n  loaderProps?: LoaderProps;\n\n  /** Controls width and height of the button. Numbers are converted to rem. `'md'` by default. */\n  size?: RaikouSize | `input-${RaikouSize}` | (string & {}) | number;\n\n  /** Key of `theme.colors` or any valid CSS color. Default value is `theme.primaryColor`.  */\n  color?: RaikouColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `theme.defaultRadius` by default. */\n  radius?: RaikouRadius;\n\n  /** Gradient data used when `variant=\"gradient\"`, default value is `theme.defaultGradient` */\n  gradient?: RaikouGradient;\n\n  /** Sets `disabled` and `data-disabled` attributes on the button element */\n  disabled?: boolean;\n\n  /** Icon displayed inside the button */\n  children?: React.ReactNode;\n\n  /** Determines whether button text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */\n  autoContrast?: boolean;\n\n  /**\n   * Whether the button should display a ripple effect on press.\n   * @default false\n   */\n  enableRipple?: boolean;\n}\n\nexport type ActionIconFactory = PolymorphicFactory<{\n  props: ActionIconProps;\n  defaultComponent: 'button';\n  defaultRef: HTMLButtonElement;\n  stylesNames: ActionIconStylesNames;\n  variant: ActionIconVariant;\n  vars: ActionIconCssVariables;\n  staticComponents: {\n    Group: typeof ActionIconGroup;\n    GroupSection: typeof ActionIconGroupSection;\n  };\n}>;\n\nconst defaultProps: Partial<ActionIconProps> = {};\n\nconst varsResolver = createVarsResolver<ActionIconFactory>(\n  (theme, { size, radius, variant, gradient, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--ai-size': getSize(size, 'ai-size'),\n        '--ai-radius': radius === undefined ? undefined : getRadius(radius),\n        '--ai-bg': color || variant ? colors.background : undefined,\n        '--ai-hover': color || variant ? colors.hover : undefined,\n        '--ai-hover-color': color || variant ? colors.hoverColor : undefined,\n        '--ai-color': colors.color,\n        '--ai-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const ActionIcon = polymorphicFactory<ActionIconFactory>((_props, ref) => {\n  const props = useProps('ActionIcon', defaultProps, _props);\n  const {\n    className,\n    unstyled,\n    variant,\n    classNames,\n    styles,\n    style,\n    loading,\n    loaderProps,\n    size,\n    color,\n    radius,\n    __staticSelector,\n    gradient,\n    vars,\n    children,\n    disabled,\n    'data-disabled': dataDisabled,\n    enableRipple,\n    autoContrast,\n    mod,\n    onClick,\n    ...others\n  } = props;\n\n  const { onClick: onRippleClickHandler, onClear: onClearRipple, ripples } = useRipple();\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (!enableRipple || disabled) {\n        return;\n      }\n\n      onRippleClickHandler(e);\n    },\n    [enableRipple, disabled, onRippleClickHandler]\n  );\n\n  const getRippleProps = useCallback<() => RippleProps>(\n    () => ({ ripples, onClear: onClearRipple }),\n    [ripples, onClearRipple]\n  );\n\n  const getStyles = useStyles<ActionIconFactory>({\n    name: ['ActionIcon', __staticSelector],\n    props,\n    className,\n    style,\n    classes: {\n      root: ActionIconRootStyle,\n      loader: ActionIconLoaderStyle,\n      icon: ActionIconIconStyle,\n    },\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <UnstyledButton\n      {...getStyles('root', {\n        active: !disabled && !loading && !dataDisabled,\n      })}\n      {...others}\n      unstyled={unstyled}\n      variant={variant}\n      size={size}\n      disabled={disabled || loading}\n      ref={ref}\n      onClick={(event) => {\n        onClick?.(event);\n        handleClick(event);\n      }}\n      mod={[{ loading, disabled: disabled || dataDisabled }, mod]}\n    >\n      <Transition mounted={!!loading} transition=\"slide-down\" duration={150}>\n        {(transitionStyles) => (\n          <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n            <Loader color=\"var(--ai-color)\" size=\"calc(var(--ai-size) * 0.55)\" {...loaderProps} />\n          </Box>\n        )}\n      </Transition>\n\n      <Box component=\"span\" mod={{ loading }} {...getStyles('icon')}>\n        {children}\n      </Box>\n\n      {enableRipple && <Ripple {...getRippleProps()} />}\n    </UnstyledButton>\n  );\n});\n\nActionIcon.displayName = '@raikou/core/ActionIcon';\nActionIcon.Group = ActionIconGroup;\nActionIcon.GroupSection = ActionIconGroupSection;\n"],"names":["createVarsResolver","getSize","getRadius","polymorphicFactory","useProps","useRipple","useCallback","useStyles","ActionIconRootStyle","ActionIconLoaderStyle","ActionIconIconStyle","jsxs","UnstyledButton","jsx","Transition","Box","Loader","Ripple","ActionIconGroup","ActionIconGroupSection"],"mappings":"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"}