masked-components-cli 1.5.0

package/README.md

@@ -0,0 +1,189 @@
+# ✨ Masked Components CLI
+
+A modern, type-safe and flexible component system for **Next.js + React**, designed to boost developer experience and speed up UI creation using a simple **CLI installer**.
+
+Masked Components provides **polymorphic**, **theme-ready**, and **highly customizable** UI components with first-class **TypeScript support**.
+
+---
+
+## 🚀 Live Demo
+
+👉 **Website:** https://masked-components.vercel.app/
+👉 **CLI Install Command:**
+
+```bash
+npx masked-components
+```
+
+---
+
+## 📦 What is Masked Components?
+
+Masked Components is a UI component library combined with a CLI that allows you to **install and scaffold pre-configured components** directly into your project.
+
+It focuses on:
+
+- Developer Experience (DX)
+- Clean and scalable architecture
+- Modern UI patterns
+- Performance and tree-shaking
+
+---
+
+## 🧱 Tech Stack
+
+- **Next.js** – Optimized routing, SSR and App Router ready
+- **React** – Component-based architecture
+- **TypeScript** – Strong typing and intelligent autocomplete
+- **Styled Components** – Theme-driven and dynamic styling
+- **React Icons** – Flexible icon support
+- **IMask** – Advanced input masking
+- **CLI (Node.js)** – Simple and fast installation
+
+---
+
+## ⚡ Installation
+
+Install Masked Components in seconds using the CLI:
+
+```bash
+npx masked-components
+```
+
+This command will:
+
+- Create a new Next.js project
+- Configure TypeScript
+- Install dependencies
+- Add Masked Components structure
+
+---
+
+## 🧩 Components Overview
+
+### 🔘 MaskedButton
+
+Highly customizable buttons with multiple variants, states, sizes, shapes, icons, and behaviors.
+
+#### Variants
+
+- `default`
+- `outline`
+- `ghost`
+- `gradient`
+- `neon`
+- `link`
+- `toggle`
+
+#### States
+
+- `default`
+- `loading`
+- `disabled`
+- `error`
+- `active`
+
+#### Features
+
+- Left & right icons
+- Loading spinner
+- Tooltip label
+- Full width support
+- Polymorphic (`button` or `a`)
+- Toggle mode
+
+#### Basic Example
+
+```tsx
+<MaskedButton variant="default" size="sm" leftIcon={<FaCode />}>
+  Default Button
+</MaskedButton>
+```
+
+---
+
+### ⌨️ MaskedInput
+
+Powerful input system with intelligent masks and real-time formatting.
+
+#### Input Variants
+
+- `default`
+- `textarea`
+- `masked`
+- `password`
+- `select`
+- `file`
+- `search`
+- `currency`
+
+#### Features
+
+- Automatic masking
+- Controlled & uncontrolled support
+- Icons
+- Validation-ready
+- Cloudinary file upload support
+- Currency formatting
+
+#### Example
+
+```tsx
+<MInput
+  variant="masked"
+  label="Phone"
+  mask="(00) 0000-0000"
+  placeholder="Phone number"
+  value={value}
+  onChange={setValue}
+/>
+```
+
+---
+
+## ✨ Key Features
+
+- ✅ TypeScript Native
+- ✅ Polymorphic Components
+- ✅ Responsive by default
+- ✅ Tree-shaking support
+- ✅ Zero unnecessary dependencies
+- ✅ Theme-ready styles
+- ✅ Modern animations
+- ✅ Accessibility-friendly
+- ✅ Optimized performance
+
+---
+
+## 🧪 Playground
+
+The website provides a full interactive playground where you can:
+
+- Test all button variants
+- Change states dynamically
+- Try input masks in real time
+- Preview sizes, shapes and icons
+
+---
+
+## 🛣️ Roadmap
+
+- 🃏 Masked Cards (Coming Soon)
+- 🎞️ Masked Animations (Coming Soon)
+- 📚 Extended documentation
+- 🧩 More components
+
+---
+
+## 👤 Author
+
+Created with 💙 by **Renato Minoita**
+
+- 💼 LinkedIn: https://www.linkedin.com/in/renato-minoita/
+- 🧑‍💻 GitHub: https://github.com/RNT13
+
+---
+
+## 📄 License
+
+MIT License © 2026

package/dist/cli.js

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+
+// src/utils/installDeps.ts
+import { execa } from "execa";
+async function installDeps(deps) {
+  await execa("npm", ["install", ...deps], {
+    stdio: "inherit"
+  });
+}
+
+// src/utils/copyTemplate.ts
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+async function copyTemplate({ templateDir, targetDir }) {
+  const packageFile = fileURLToPath(import.meta.url);
+  const packageDir = path.dirname(packageFile);
+  let currentDir = packageDir;
+  let source = null;
+  while (currentDir !== path.dirname(currentDir)) {
+    const possible = path.join(currentDir, "templates", templateDir);
+    if (fs.existsSync(possible)) {
+      source = possible;
+      break;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  if (!source) {
+    throw new Error(`Template n\xE3o encontrado: ${templateDir}`);
+  }
+  const target = path.resolve(process.cwd(), targetDir);
+  await fs.ensureDir(target);
+  await fs.copy(source, target, {
+    overwrite: false,
+    errorOnExist: false
+  });
+}
+
+// src/installers/maskedButtons.ts
+async function installMaskedButtons() {
+  console.log("\u{1F4E6} Instalando Masked Buttons...");
+  await installDeps(["react-input-mask"]);
+  await copyTemplate({
+    templateDir: "masked-buttons",
+    targetDir: "src/components/ui"
+  });
+}
+
+// src/installers/maskedCards.ts
+async function installMaskedCards() {
+  console.log("\u{1F4E6} Instalando Masked Cards...");
+  await installDeps(["react-input-mask"]);
+  await copyTemplate({
+    templateDir: "masked-cards",
+    targetDir: "src/components/ui"
+  });
+}
+
+// src/installers/maskedInput.ts
+async function installMaskedInput() {
+  console.log("\u{1F4E6} Instalando Masked Input...");
+  await installDeps(["react-input-mask"]);
+  await copyTemplate({
+    templateDir: "masked-input",
+    targetDir: "src/components/ui"
+  });
+}
+
+// src/prompts/selectComponents.ts
+import prompts from "prompts";
+async function selectComponents() {
+  const response = await prompts({
+    type: "multiselect",
+    name: "components",
+    message: "Quais componentes deseja instalar?",
+    choices: [
+      { title: "Masked Input", value: "masked-input" },
+      { title: "Masked Cards", value: "masked-cards" },
+      { title: "Masked Buttons", value: "masked-buttons" }
+    ]
+  });
+  return response.components ?? [];
+}
+
+// src/cli.ts
+async function main() {
+  const components = await selectComponents();
+  if (!components.length) {
+    console.log("Nenhum componente selecionado.");
+    return;
+  }
+  if (components.includes("masked-input")) {
+    await installMaskedInput();
+  }
+  if (components.includes("masked-cards")) {
+    await installMaskedCards();
+  }
+  if (components.includes("masked-buttons")) {
+    await installMaskedButtons();
+  }
+  console.log("\u2705 Componentes instalados com sucesso!");
+}
+main();

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "masked-components-cli",
+  "version": "1.5.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "bin": {
+    "masked-components-cli": "./dist/cli.js"
+  },
+  "description": "Masked Components",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup src/cli.ts --format esm --platform node --target es2020",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "masked",
+    "components"
+  ],
+  "license": "MIT",
+  "author": "RNT",
+  "main": "index.js",
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.0.3",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "execa": "^9.6.1",
+    "fs-extra": "^11.3.3",
+    "prompts": "^2.4.2",
+    "react-icons": "^5.5.0",
+    "react-input-mask": "^2.0.4"
+  }
+}

package/templates/masked-buttons/MaskedButton/Base/BaseButton.styles.ts

@@ -0,0 +1,155 @@
+import { animations, transitions } from '@/styles/animations'
+import styled, { css } from 'styled-components'
+import { ButtonShape, ButtonSize, ButtonState } from '../MaskedButton.types'
+
+export const LabelDiv = styled.div`
+  position: absolute;
+  bottom: calc(150% + 12px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+
+  padding: 8px 12px;
+  background-color: ${({ theme }) => theme.colors.baseBlue.light};
+  color: white;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+
+  opacity: 0;
+  pointer-events: none;
+
+  z-index: 1;
+
+  ${transitions.delay}
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 87%;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 8px;
+    height: 8px;
+    background-color: ${({ theme }) => theme.colors.baseBlue.light};
+  }
+`
+
+export const ButtonContent = styled.span<{ $state: ButtonState }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`
+
+export const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`
+
+const sizeStyles = {
+  sm: css`
+    height: 100%;
+    padding: 6px 10px;
+    font-size: 14px;
+  `,
+  md: css`
+    height: 100%;
+    padding: 12px 14px;
+    font-size: 16px;
+  `,
+  lg: css`
+    height: 100%;
+    padding: 16px 20px;
+    font-size: 18px;
+  `
+}
+
+const ButtonShapes = {
+  rounded: css`
+    border-radius: 18px;
+  `,
+
+  circle: css`
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg,
+    span {
+      width: 25px;
+      height: 25px;
+      margin: 0;
+    }
+  `,
+
+  square: css`
+    border-radius: 5px;
+  `
+}
+
+const stateStyles = {
+  loading: css`
+    cursor: not-allowed;
+
+    svg {
+      ${animations.spin}
+      stroke-width: 2;
+    }
+  `,
+
+  default: css``,
+
+  disabled: css`
+    cursor: not-allowed;
+    opacity: 0.5;
+  `,
+
+  error: css`
+    &:hover {
+      ${animations.shakeX}
+    }
+  `
+}
+
+export const BaseButtonContainer = styled.button<{
+  $size?: ButtonSize
+  $state?: ButtonState
+  $fullWidth?: boolean
+  $shape?: ButtonShape
+}>`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  cursor: pointer;
+  position: relative;
+
+  ${({ $size = 'md' }) => sizeStyles[$size]}
+  ${({ $fullWidth }) => $fullWidth && 'width: 100%;'}
+  ${({ $fullWidth }) => $fullWidth && 'justify-content: center;'}
+  ${({ $state }) => $state && stateStyles[$state]}
+  ${({ $shape }) => $shape && ButtonShapes[$shape]}
+
+  ${transitions.fast}
+
+  &:hover ${LabelDiv} {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  &:not(:hover) ${LabelDiv} {
+    transition-delay: 0s;
+  }
+
+  &:active {
+    transform: scale(0.97);
+  }
+`

package/templates/masked-buttons/MaskedButton/Base/BaseButton.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { forwardRef } from 'react'
+import { VscLoading } from 'react-icons/vsc'
+import { BaseButtonProps } from '../MaskedButton.types'
+import { BaseButtonContainer, ButtonContent, IconWrapper, LabelDiv } from './BaseButton.styles'
+
+type BaseButtonInternalProps = BaseButtonProps & {
+  href?: string
+  target?: string
+  rel?: string
+}
+
+
+export const BaseButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BaseButtonInternalProps>(
+  function BaseButton(
+    {
+      size = 'md',
+      state = 'default',
+      label,
+      children,
+      leftIcon,
+      rightIcon,
+      fullWidth,
+      href,
+      target,
+      rel,
+      type = 'button',
+      shapes = 'rounded',
+      ...props
+    },
+    ref
+  ) {
+    const isDisabled = state === 'disabled' || state === 'loading'
+
+    const Component = href ? 'a' : 'button'
+
+    const content = (
+      <ButtonContent $state={state}>
+        {state === 'loading' ? (
+          <>
+            {<IconWrapper>{<VscLoading />}</IconWrapper>}
+            <span>Loading...</span>
+          </>
+        ) : (
+          <>
+            {leftIcon && <IconWrapper>{leftIcon}</IconWrapper>}
+            {<span>{children}</span>}
+            {rightIcon && <IconWrapper>{rightIcon}</IconWrapper>}
+          </>
+        )}
+        {label && <LabelDiv>{label}</LabelDiv>}
+      </ButtonContent>
+    )
+
+    return (
+      <BaseButtonContainer
+        as={Component}
+        href={href}
+        target={target}
+        rel={rel}
+        ref={ref as unknown as React.Ref<HTMLButtonElement>}
+        disabled={!href && isDisabled}
+        aria-disabled={href ? isDisabled : undefined}
+        type={!href ? type : undefined}
+        $size={size}
+        $state={state}
+        $fullWidth={fullWidth}
+        $shape={shapes}
+        {...props}
+      >
+        {content}
+      </BaseButtonContainer>
+    )
+  })

package/templates/masked-buttons/MaskedButton/MaskedButton.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { ButtonProps } from './MaskedButton.types'
+import DefaultButton from './variants/Default/DefaultButton'
+import GhostButton from './variants/Ghost/GhostButton'
+import GradientButton from './variants/Gradient/GradientButton'
+import LinkButton from './variants/Link/LinkButton'
+import NeonButton from './variants/Neon/NeonButton'
+import OutlineButton from './variants/Outline/OutlineButton'
+import TobbleButton from './variants/Toggle/ToggleButton'
+
+export function MButton(props: ButtonProps) {
+  switch (props.variant) {
+    case 'default':
+      return <DefaultButton {...props} />
+
+    case 'outline':
+      return <OutlineButton {...props} />
+
+    case 'ghost':
+      return <GhostButton {...props} />
+
+    case 'link':
+      return <LinkButton {...props} />
+
+    case 'gradient':
+      return <GradientButton {...props} />
+
+    case 'neon':
+      return <NeonButton {...props} />
+
+    case 'toggle':
+      return <TobbleButton {...props} />
+
+    default:
+      return null
+  }
+}

package/templates/masked-buttons/MaskedButton/MaskedButton.types.ts

@@ -0,0 +1,67 @@
+/* ================= BASE ================= */
+
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+export type ButtonState = 'default' | 'disabled' | 'loading' | 'error'
+
+export type ButtonShape = 'rounded' | 'circle' | 'square'
+
+export type BaseButtonProps = {
+  size?: ButtonSize
+  shapes?: ButtonShape
+  state?: ButtonState
+
+  fullWidth?: boolean
+  label?: string
+
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  children?: React.ReactNode
+
+  className?: string
+  type?: 'button' | 'submit' | 'reset'
+  onClick?: () => void
+
+  href?: string
+  target?: React.HTMLAttributeAnchorTarget
+  rel?: string
+}
+
+/* ================= VARIANT MAP ================= */
+
+export type ButtonVariantMap = {
+  default: BaseButtonProps & {
+    $isActive?: boolean
+  }
+
+  outline: BaseButtonProps & {
+    $isActive?: boolean
+  }
+
+  ghost: BaseButtonProps & {
+    $isActive?: boolean
+  }
+
+  link: BaseButtonProps & {
+    $isActive?: boolean
+  }
+
+  gradient: BaseButtonProps & {
+    $isActive?: boolean
+  }
+
+  neon: BaseButtonProps & {
+    $isActive?: boolean
+  }
+
+  toggle: BaseButtonProps & {
+    $isActive?: boolean
+    $toggleLabel?: string
+  }
+}
+
+/* ================= UNION AUTOMÁTICA ================= */
+
+export type ButtonProps = {
+  [K in keyof ButtonVariantMap]: { variant: K } & ButtonVariantMap[K]
+}[keyof ButtonVariantMap]