masked-components-cli 1.5.0

package/templates/masked-buttons/MaskedButton/variants/Default/DefaultButton.styles.ts

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components'
+import { BaseButton } from '../../Base/BaseButton'
+
+type props = {
+  $isActive?: boolean
+  $isError?: boolean
+}
+
+const activeStyles = css`
+  color: ${({ theme }) => theme.colors.baseBlue.light20};
+  background-color: ${({ theme }) => theme.colors.baseBlue.dark20};
+  border: 2px solid ${({ theme }) => theme.colors.baseBlue.light20};
+
+  box-shadow: 0px 0px 10px 1px ${({ theme }) => theme.colors.baseBlue.base};
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.baseBlue.dark20};
+    background-color: ${({ theme }) => theme.colors.baseBlue.light};
+    border-color: ${({ theme }) => theme.colors.baseBlue.dark20};
+  }
+`
+
+const errorStyles = css`
+  background-color: ${({ theme }) => theme.colors.baseRed.light08};
+  color: ${({ theme }) => theme.colors.baseRed.light30};
+  border-color: ${({ theme }) => theme.colors.baseRed.light08};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.baseRed.dark};
+    color: ${({ theme }) => theme.colors.baseRed.dark30};
+    border-color: ${({ theme }) => theme.colors.baseRed.dark30};
+  }
+`
+
+export const DefaultButtonContainer = styled(BaseButton)<props>`
+  color: ${({ theme }) => theme.colors.baseBlue.dark20};
+  background-color: ${({ theme }) => theme.colors.baseBlue.light20};
+  border: 2px solid ${({ theme }) => theme.colors.baseBlue.dark20};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.baseBlue.light20};
+    color: ${({ theme }) => theme.colors.baseBlue.base};
+    border-color: ${({ theme }) => theme.colors.baseBlue.base};
+  }
+
+  ${({ $isActive }) => $isActive && activeStyles}
+
+  ${({ $isError }) => $isError && errorStyles}
+`

package/templates/masked-buttons/MaskedButton/variants/Default/DefaultButton.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { ButtonVariantMap } from '../../MaskedButton.types'
+import { DefaultButtonContainer } from './DefaultButton.styles'
+
+type props = { variant: 'default' } & ButtonVariantMap['default']
+
+export default function DefaultButton(props: props) {
+  return <DefaultButtonContainer $isActive={props.$isActive} $isError={props.state === 'error'} {...props} />
+}

package/templates/masked-buttons/MaskedButton/variants/Ghost/GhostButton.styles.ts

@@ -0,0 +1,52 @@
+import { css, styled } from 'styled-components'
+import { BaseButton } from '../../Base/BaseButton'
+
+type props = {
+  $isActive?: boolean
+  $isError?: boolean
+}
+
+const activeStyles = css`
+  color: ${({ theme }) => theme.colors.baseBlue.light20};
+  background-color: transparent;
+  border: 2px solid ${({ theme }) => theme.colors.baseBlue.light20};
+
+  box-shadow: 0px 0px 10px 1px ${({ theme }) => theme.colors.baseBlue.light50};
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.baseBlue.dark20};
+    background-color: ${({ theme }) => theme.colors.baseBlue.light};
+    border-color: transparent;
+  }
+`
+
+const errorStyles = css`
+  color: ${({ theme }) => theme.colors.baseRed.light40};
+  background-color: transparent;
+  border: 2px solid transparent;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.baseRed.light04};
+    color: ${({ theme }) => theme.colors.baseRed.light40};
+    border-color: transparent;
+  }
+`
+
+export const GhostButtonContainer = styled(BaseButton)<props>`
+  color: ${({ theme }) => theme.colors.baseBlue.base};
+  background-color: transparent;
+  border: 2px solid transparent;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.baseBlue.base};
+    color: ${({ theme }) => theme.colors.baseBlue.dark20};
+    border-color: transparent;
+  }
+
+  ${({ $isActive }) => $isActive && activeStyles}
+  ${({ $isError }) => $isError && errorStyles}
+`

package/templates/masked-buttons/MaskedButton/variants/Ghost/GhostButton.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { ButtonVariantMap } from '../../MaskedButton.types'
+import { GhostButtonContainer } from './GhostButton.styles'
+
+type props = { variant: 'ghost' } & ButtonVariantMap['ghost']
+
+export default function GhostButton(props: props) {
+  return <GhostButtonContainer $isActive={props.$isActive} $isError={props.state === 'error'} {...props} />
+}

package/templates/masked-buttons/MaskedButton/variants/Gradient/GradientButton.styles.ts

@@ -0,0 +1,52 @@
+import { theme } from '@/styles/theme'
+import { css, styled } from 'styled-components'
+import { BaseButton } from '../../Base/BaseButton'
+
+type props = {
+  $isActive?: boolean
+  $isError?: boolean
+}
+
+export const activeStyles = css`
+  color: ${({ theme }) => theme.colors.baseBlue.light40};
+  background-image: linear-gradient(180deg, ${theme.colors.baseBlue.light30}, ${theme.colors.baseBlue.dark30});
+  border: 2px solid ${theme.colors.baseBlue.light30};
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    background-image: linear-gradient(180deg, ${theme.colors.baseBlue.dark30}, ${theme.colors.baseBlue.light30});
+    color: ${theme.colors.baseBlue.dark40};
+    border-color: ${theme.colors.baseBlue.base};
+  }
+`
+
+export const errorStyles = css`
+  background-image: linear-gradient(180deg, ${theme.colors.baseRed.light08}, ${theme.colors.baseRed.dark});
+  color: ${({ theme }) => theme.colors.baseRed.light30};
+  border-color: ${({ theme }) => theme.colors.baseRed.light08};
+
+  &:hover {
+    background-image: linear-gradient(180deg, ${theme.colors.baseRed.dark}, ${theme.colors.baseRed.light08});
+    color: ${({ theme }) => theme.colors.baseRed.light40};
+    border-color: ${({ theme }) => theme.colors.baseRed.light40};
+  }
+`
+
+export const GradientButtonContainer = styled(BaseButton)<props>`
+  color: ${({ theme }) => theme.colors.baseBlue.light30};
+  background-image: linear-gradient(180deg, ${theme.colors.baseBlue.light}, ${theme.colors.baseBlue.dark});
+  border: 2px solid ${theme.colors.baseBlue.light02};
+
+  &:hover {
+    background-image: linear-gradient(180deg, ${theme.colors.baseBlue.dark}, ${theme.colors.baseBlue.light});
+    color: ${theme.colors.baseBlue.dark30};
+    border-color: ${theme.colors.baseBlue.base};
+  }
+
+  ${({ $isActive }) => $isActive && activeStyles}
+
+  ${({ $isError }) => $isError && errorStyles}
+`

package/templates/masked-buttons/MaskedButton/variants/Gradient/GradientButton.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { ButtonVariantMap } from '../../MaskedButton.types'
+import { GradientButtonContainer } from './GradientButton.styles'
+
+type props = { variant: 'gradient' } & ButtonVariantMap['gradient']
+
+export default function GradientButton(props: props) {
+  return <GradientButtonContainer $isActive={props.$isActive} $isError={props.state === 'error'} {...props} />
+}

package/templates/masked-buttons/MaskedButton/variants/Link/LinkButton.styles.ts

@@ -0,0 +1,55 @@
+import { theme } from '@/styles/theme'
+import { css, styled } from 'styled-components'
+import { BaseButton } from '../../Base/BaseButton'
+
+type props = {
+  $isActive?: boolean
+  $isError?: boolean
+}
+
+const activeStyles = css`
+  color: ${theme.colors.baseBlue.light20};
+  text-decoration: underline;
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    color: ${theme.colors.baseBlue.light30};
+  }
+`
+
+const errorStyles = css`
+  color: ${theme.colors.baseRed.light30};
+
+  &:hover {
+    color: ${theme.colors.baseRed.light20};
+    text-decoration: underline;
+  }
+`
+
+export const LinkButtonContainer = styled(BaseButton)<props>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+
+  color: ${theme.colors.baseBlue.base};
+  background-color: transparent;
+  border: none;
+
+  &:hover {
+    color: ${theme.colors.baseBlue.base};
+    background-color: transparent;
+    border: none;
+
+    text-decoration: underline;
+    color: ${theme.colors.baseBlue.light30};
+    transition: all 0.3s ease;
+  }
+
+  ${({ $isActive }) => $isActive && activeStyles}
+
+  ${({ $isError }) => $isError && errorStyles}
+`

package/templates/masked-buttons/MaskedButton/variants/Link/LinkButton.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { ButtonVariantMap } from '../../MaskedButton.types'
+import { LinkButtonContainer } from './LinkButton.styles'
+
+type props = { variant: 'link' } & ButtonVariantMap['link']
+
+export default function LinkButton(props: props) {
+  return <LinkButtonContainer data-testid="link-button" $isActive={props.$isActive} $isError={props.state === 'error'} {...props} />
+}

package/templates/masked-buttons/MaskedButton/variants/Neon/NeonButton.styles.ts

@@ -0,0 +1,57 @@
+import { theme, themeConfig } from '@/styles/theme'
+import { css, styled } from 'styled-components'
+import { BaseButton } from '../../Base/BaseButton'
+
+type props = {
+  $isActive?: boolean
+  $isError?: boolean
+}
+
+const activeStyles = css`
+  color: ${theme.colors.baseBlue.dark50};
+  background-image: linear-gradient(70deg, ${themeConfig.neon.colors.neonPink.base}, ${themeConfig.neon.colors.neonBlue.base});
+  border: 2px solid ${themeConfig.neon.colors.neonBlue.base};
+
+  box-shadow: 0 0 13px ${themeConfig.neon.colors.neonBlue.base};
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    background-image: linear-gradient(380deg, ${themeConfig.neon.colors.neonBlue.base}, ${themeConfig.neon.colors.neonPink.base});
+    color: ${theme.colors.baseBlue.dark50};
+    border-color: ${themeConfig.neon.colors.neonBlue.base};
+    box-shadow: 0 0 10px ${themeConfig.neon.colors.neonBlue.base};
+  }
+`
+
+const errorStyles = css`
+  background-image: linear-gradient(70deg, ${themeConfig.neon.colors.neonBlue.base}, ${theme.colors.baseRed.dark});
+  color: ${themeConfig.neon.colors.neonRed.soft};
+  border-color: ${themeConfig.neon.colors.neonBlue.base};
+
+  &:hover {
+    background-image: linear-gradient(380deg, ${theme.colors.baseRed.dark}, ${themeConfig.neon.colors.neonBlue.base});
+    color: ${theme.colors.baseRed.light40};
+    border-color: ${themeConfig.neon.colors.neonRed.base};
+    box-shadow: 0 0 15px ${themeConfig.neon.colors.neonRed.base};
+  }
+`
+
+export const NeonButtonContainer = styled(BaseButton)<props>`
+  color: ${theme.colors.baseBlue.dark50};
+  background-image: linear-gradient(70deg, ${themeConfig.neon.colors.neonPink.base}, ${themeConfig.neon.colors.neonBlue.base});
+  border: 2px solid ${themeConfig.neon.colors.neonBlue.base};
+
+  &:hover {
+    background-image: linear-gradient(380deg, ${themeConfig.neon.colors.neonBlue.base}, ${themeConfig.neon.colors.neonPink.base});
+    color: ${theme.colors.baseBlue.dark50};
+    border-color: ${themeConfig.neon.colors.neonBlue.base};
+    box-shadow: 0 0 10px ${themeConfig.neon.colors.neonBlue.base};
+  }
+
+  ${({ $isActive }) => $isActive && activeStyles}
+
+  ${({ $isError }) => $isError && errorStyles}
+`

package/templates/masked-buttons/MaskedButton/variants/Neon/NeonButton.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { ButtonVariantMap } from '../../MaskedButton.types'
+import { NeonButtonContainer } from './NeonButton.styles'
+
+type props = { variant: 'neon' } & ButtonVariantMap['neon']
+
+export default function NeonButton(props: props) {
+  return <NeonButtonContainer $isActive={props.$isActive} $isError={props.state === 'error'} {...props} />
+}

package/templates/masked-buttons/MaskedButton/variants/Outline/OutlineButton.styles.ts

@@ -0,0 +1,53 @@
+import { css, styled } from 'styled-components'
+import { BaseButton } from '../../Base/BaseButton'
+
+type props = {
+  $isActive?: boolean
+  $isError?: boolean
+}
+
+const activeStyles = css`
+  color: ${({ theme }) => theme.colors.baseBlue.light20};
+  background-color: ${({ theme }) => theme.colors.baseBlue.dark02};
+  border: 2px solid ${({ theme }) => theme.colors.baseBlue.light20};
+
+  box-shadow: 0px 0px 10px 1px ${({ theme }) => theme.colors.baseBlue.base};
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.baseBlue.dark20};
+    background-color: ${({ theme }) => theme.colors.baseBlue.light08};
+    border-color: ${({ theme }) => theme.colors.baseBlue.dark08};
+  }
+`
+
+const errorStyles = css`
+  background-color: transparent;
+  color: ${({ theme }) => theme.colors.baseRed.light30};
+  border-color: ${({ theme }) => theme.colors.baseRed.light08};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.baseRed.light04};
+    color: ${({ theme }) => theme.colors.baseRed.light40};
+    border-color: ${({ theme }) => theme.colors.baseRed.light40};
+  }
+`
+
+export const OutlineButtonContainer = styled(BaseButton)<props>`
+  color: ${({ theme }) => theme.colors.baseBlue.base};
+  background-color: transparent;
+  border: 2px solid ${({ theme }) => theme.colors.baseBlue.base};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.baseBlue.base};
+    color: ${({ theme }) => theme.colors.baseBlue.dark20};
+    border-color: ${({ theme }) => theme.colors.baseBlue.dark20};
+  }
+
+  ${({ $isActive }) => $isActive && activeStyles}
+
+  ${({ $isError }) => $isError && errorStyles}
+`

package/templates/masked-buttons/MaskedButton/variants/Outline/OutlineButton.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { ButtonVariantMap } from '../../MaskedButton.types'
+import { OutlineButtonContainer } from './OutlineButton.styles'
+
+type Props = { variant: 'outline' } & ButtonVariantMap['outline']
+
+export default function OutlineButton(props: Props) {
+  return <OutlineButtonContainer $isActive={props.$isActive} $isError={props.state === 'error'} {...props} />
+}

package/templates/masked-buttons/MaskedButton/variants/Toggle/ToggleButton.styles.ts

@@ -0,0 +1,70 @@
+import { transitions } from '@/styles/animations'
+import { css, styled } from 'styled-components'
+import { BaseButtonContainer } from '../../Base/BaseButton.styles'
+
+type props = {
+  $isActive?: boolean
+}
+
+const activeStyles = css`
+  color: ${({ theme }) => theme.colors.baseBlue.light20};
+  background-color: ${({ theme }) => theme.colors.baseBlue.dark02};
+  border: 2px solid ${({ theme }) => theme.colors.baseBlue.light20};
+
+  box-shadow: 0px 0px 10px 1px ${({ theme }) => theme.colors.baseBlue.base};
+
+  svg {
+    color: inherit;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.baseBlue.dark20};
+    background-color: ${({ theme }) => theme.colors.baseBlue.light08};
+    border-color: ${({ theme }) => theme.colors.baseBlue.dark08};
+  }
+`
+
+export const ToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const ToggleButtonContainer = styled(BaseButtonContainer)<props>`
+  background-color: ${({ theme, $isActive }) => ($isActive ? theme.colors.baseBlue.light30 : theme.colors.baseBlack.light20)};
+  border: 2px solid ${({ theme, $isActive }) => ($isActive ? theme.colors.baseBlue.base : theme.colors.baseBlack.base)};
+  width: 44px;
+  height: 24px;
+  border-radius: 999px;
+  position: relative;
+  padding: 0;
+
+  ${transitions.slow}
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 2px;
+    transform: ${({ $isActive }) => ($isActive ? 'translate(20px, -50%)' : 'translate(0, -50%)')};
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: ${({ theme, $isActive }) => ($isActive ? theme.colors.baseBlue.light20 : theme.colors.baseBlack.base)};
+
+    ${transitions.slow}
+  }
+
+  &:hover:not(:disabled) {
+    transform: scale(1.05);
+    background-color: ${({ theme, $isActive }) => ($isActive ? theme.colors.baseBlue.light04 : theme.colors.baseBlack.light20)};
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  ${({ $isActive }) => $isActive && activeStyles}
+`

package/templates/masked-buttons/MaskedButton/variants/Toggle/ToggleButton.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { ButtonVariantMap } from '../../MaskedButton.types'
+import { ToggleButtonContainer, ToggleWrapper } from './ToggleButton.styles'
+
+type Props = { variant: "toggle" } & ButtonVariantMap['toggle']
+
+export default function ToggleButton(props: Props) {
+  return (
+    <ToggleWrapper>
+      {props.$toggleLabel}
+      <ToggleButtonContainer $isActive={props.$isActive} {...props} />
+    </ToggleWrapper>
+  )
+}

package/templates/masked-input/MaskedInput/FormikMaskedInput.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { FormikCurrencyInput } from './formikVariants/FormikCurrencyInput'
+import { FormikFileInput } from './formikVariants/FormikFileInput'
+import { FormikMaskedTextInput } from './formikVariants/FormikMaskedTextInput'
+import { FormikPasswordInput } from './formikVariants/FormikPasswordInput'
+import { FormikSearchInput } from './formikVariants/FormikSearchInput'
+import { FormikSelectInput } from './formikVariants/FormikSelectInput'
+import { FormikTextareaInput } from './formikVariants/FormikTextareaInput'
+import { FormikTextInput } from './formikVariants/FormikTextInput'
+import { InputProps } from './MaskedInput.types'
+
+type Props = InputProps & { name: string }
+
+export function FormikMInput(props: Props) {
+  switch (props.variant) {
+    case 'default':
+      return <FormikTextInput {...props} />
+
+    case 'textarea':
+      return <FormikTextareaInput {...props} />
+
+    case 'masked':
+      return <FormikMaskedTextInput {...props} />
+
+    case 'password':
+      return <FormikPasswordInput {...props} />
+
+    case 'select':
+      return <FormikSelectInput {...props} />
+
+    case 'file':
+      return <FormikFileInput {...props} />
+
+    case 'search':
+      return <FormikSearchInput {...props} />
+
+    case 'currency':
+      return <FormikCurrencyInput {...props} />
+
+    default:
+      return null
+  }
+}