@grazziotin/react-components-next 0.1.0 → 1.0.0

package/README.md

@@ -1,174 +1,187 @@
-# React Components Library
-
-Biblioteca de componentes React reutilizáveis, construída com TypeScript e Tailwind CSS.
-
-## Instalação
-
-```bash
-npm install react-components-next
-```
-
-> **Atenção:** esta biblioteca usa classes do Tailwind CSS. Certifique-se de que o Tailwind esteja configurado no seu projeto.
-
-## Componentes disponíveis
-
-| Componente | Descrição |
-|------------|-----------|
-| `Button` | Botão com variantes, tamanhos, loading e ícones |
-| `Input` | Campo de entrada com label, hint, erro e addons |
-| `Card` | Container com header, content e footer compostos |
-| `Badge` | Etiqueta colorida para status e categorias |
-| `Avatar` | Foto de perfil com fallback de iniciais |
-
-## Uso
-
-```tsx
-import { Button, Card, CardHeader, CardTitle, CardContent, Input, Badge, Avatar } from "react-components-next";
-
-export function Example() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Perfil</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="flex items-center gap-3">
-          <Avatar fallback="João Silva" size="md" />
-          <div>
-            <p>João Silva</p>
-            <Badge variant="success" dot>Online</Badge>
-          </div>
-        </div>
-        <Input label="E-mail" type="email" placeholder="joao@exemplo.com" />
-        <Button variant="primary" fullWidth>Salvar</Button>
-      </CardContent>
-    </Card>
-  );
-}
-```
-
-## Componentes
-
-### Button
-
-```tsx
-<Button
-  variant="primary"    // "primary" | "secondary" | "outline" | "ghost" | "destructive"
-  size="md"            // "sm" | "md" | "lg"
-  loading={false}      // boolean
-  fullWidth={false}    // boolean
-  leftIcon={<Icon />}  // ReactNode
-  rightIcon={<Icon />} // ReactNode
->
-  Clique aqui
-</Button>
-```
-
-### Input
-
-```tsx
-<Input
-  label="Nome"
-  placeholder="Digite..."
-  hint="Texto de ajuda"
-  error="Mensagem de erro"
-  size="md"              // "sm" | "md" | "lg"
-  leftAddon={<Icon />}   // ReactNode
-  rightAddon={<Icon />}  // ReactNode
-  fullWidth={false}
-/>
-```
-
-### Card
-
-```tsx
-<Card shadow="sm" padding="md" hoverable bordered>
-  <CardHeader>
-    <CardTitle>Título</CardTitle>
-    <CardDescription>Descrição</CardDescription>
-  </CardHeader>
-  <CardContent>Conteúdo</CardContent>
-  <CardFooter>
-    <Button>Ação</Button>
-  </CardFooter>
-</Card>
-```
-
-### Badge
-
-```tsx
-<Badge
-  variant="success"  // "default" | "primary" | "success" | "warning" | "danger" | "info"
-  dot={false}        // boolean - exibe um ponto colorido
->
-  Online
-</Badge>
-```
-
-### Avatar
-
-```tsx
-<Avatar
-  src="https://..."        // URL da imagem (opcional)
-  alt="Nome do usuário"
-  fallback="João Silva"    // usado para gerar as iniciais
-  size="md"                // "xs" | "sm" | "md" | "lg" | "xl"
-/>
-```
-
-## Desenvolvimento
-
-```bash
-# Instalar dependências
-npm install
-
-# Rodar servidor de desenvolvimento com showcase
-npm run dev
-
-# Build da biblioteca para npm
-npm run build:lib
-
-# Build completo (biblioteca + Next.js)
-npm run build:all
-
-# Verificar tipos TypeScript
-npm run type-check
-```
-
-## Publicar no npm
-
-```bash
-# Fazer login no npm
-npm login
-
-# Publicar (executa build:lib automaticamente via prepublishOnly)
-npm publish
-```
-
-## Estrutura do projeto
-
-```
-src/
-├── app/                   # Next.js App Router (showcase)
-│   ├── page.tsx           # Página inicial com lista de componentes
-│   └── showcase/          # Páginas de demonstração
-│       ├── button/
-│       ├── input/
-│       ├── card/
-│       ├── badge/
-│       └── avatar/
-├── components/            # Biblioteca de componentes (publicada no npm)
-│   ├── index.ts           # Entrypoint principal
-│   └── ui/
-│       ├── Button/
-│       ├── Input/
-│       ├── Card/
-│       ├── Badge/
-│       └── Avatar/
-└── lib/
-    └── utils.ts           # Utilitário cn() para classes CSS
-```
-
-## Licença
-
-MIT
+# React Components Library
+
+Biblioteca de componentes React reutilizáveis, construída com TypeScript e Tailwind CSS.
+
+## Instalação
+
+```bash
+npm install react-components-next
+```
+
+> **Atenção:** esta biblioteca usa classes do Tailwind CSS. Certifique-se de que o Tailwind esteja configurado no seu projeto.
+
+## Componentes disponíveis
+
+| Componente | Descrição                                        |
+| ---------- | ------------------------------------------------ |
+| `Button`   | Botão com variantes, tamanhos, loading e ícones  |
+| `Input`    | Campo de entrada com label, hint, erro e addons  |
+| `Card`     | Container com header, content e footer compostos |
+| `Badge`    | Etiqueta colorida para status e categorias       |
+| `Avatar`   | Foto de perfil com fallback de iniciais          |
+
+## Uso
+
+```tsx
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Input,
+  Badge,
+  Avatar,
+} from "react-components-next";
+
+export function Example() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Perfil</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-3">
+          <Avatar fallback="João Silva" size="md" />
+          <div>
+            <p>João Silva</p>
+            <Badge variant="success" dot>
+              Online
+            </Badge>
+          </div>
+        </div>
+        <Input label="E-mail" type="email" placeholder="joao@exemplo.com" />
+        <Button variant="primary" fullWidth>
+          Salvar
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Componentes
+
+### Button
+
+```tsx
+<Button
+  variant="primary" // "primary" | "secondary" | "outline" | "ghost" | "destructive"
+  size="md" // "sm" | "md" | "lg"
+  loading={false} // boolean
+  fullWidth={false} // boolean
+  leftIcon={<Icon />} // ReactNode
+  rightIcon={<Icon />} // ReactNode
+>
+  Clique aqui
+</Button>
+```
+
+### Input
+
+```tsx
+<Input
+  label="Nome"
+  placeholder="Digite..."
+  hint="Texto de ajuda"
+  error="Mensagem de erro"
+  size="md" // "sm" | "md" | "lg"
+  leftAddon={<Icon />} // ReactNode
+  rightAddon={<Icon />} // ReactNode
+  fullWidth={false}
+/>
+```
+
+### Card
+
+```tsx
+<Card shadow="sm" padding="md" hoverable bordered>
+  <CardHeader>
+    <CardTitle>Título</CardTitle>
+    <CardDescription>Descrição</CardDescription>
+  </CardHeader>
+  <CardContent>Conteúdo</CardContent>
+  <CardFooter>
+    <Button>Ação</Button>
+  </CardFooter>
+</Card>
+```
+
+### Badge
+
+```tsx
+<Badge
+  variant="success" // "default" | "primary" | "success" | "warning" | "danger" | "info"
+  dot={false} // boolean - exibe um ponto colorido
+>
+  Online
+</Badge>
+```
+
+### Avatar
+
+```tsx
+<Avatar
+  src="https://..." // URL da imagem (opcional)
+  alt="Nome do usuário"
+  fallback="João Silva" // usado para gerar as iniciais
+  size="md" // "xs" | "sm" | "md" | "lg" | "xl"
+/>
+```
+
+## Desenvolvimento
+
+```bash
+# Instalar dependências
+npm install
+
+# Rodar servidor de desenvolvimento com showcase
+npm run dev
+
+# Build da biblioteca para npm
+npm run build:lib
+
+# Build completo (biblioteca + Next.js)
+npm run build:all
+
+# Verificar tipos TypeScript
+npm run type-check
+```
+
+## Publicar no npm
+
+```bash
+# Fazer login no npm
+npm login
+
+# Publicar (executa build:lib automaticamente via prepublishOnly)
+npm publish
+```
+
+## Estrutura do projeto
+
+```
+src/
+├── app/                   # Next.js App Router (showcase)
+│   ├── page.tsx           # Página inicial com lista de componentes
+│   └── showcase/          # Páginas de demonstração
+│       ├── button/
+│       ├── input/
+│       ├── card/
+│       ├── badge/
+│       └── avatar/
+├── components/            # Biblioteca de componentes (publicada no npm)
+│   ├── index.ts           # Entrypoint principal
+│   └── ui/
+│       ├── Button/
+│       ├── Input/
+│       ├── Card/
+│       ├── Badge/
+│       └── Avatar/
+└── lib/
+    └── utils.ts           # Utilitário cn() para classes CSS
+```
+
+## Licença
+
+MIT

package/dist/chunk-CNXFSE26.mjs

@@ -0,0 +1,120 @@
+import { __spreadValues, cn } from './chunk-NHHZBMJL.mjs';
+import { Box } from '@mui/material';
+import { Tooltip } from '@mantine/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import DialogMui from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+
+function Card({
+  margin,
+  onClick,
+  title,
+  toolTip,
+  className,
+  borderTitle,
+  children,
+  borderRadius,
+  width = "100%",
+  height = "auto",
+  titleWidth = "100%",
+  justifyContent = "space-between",
+  titleColor = "var(--color-primary)",
+  icon
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onClick,
+      className: cn(className, "text-sm!"),
+      sx: __spreadValues({
+        width,
+        margin,
+        height,
+        borderRadius,
+        "@media (max-width: 768px)": { width: "100%" },
+        boxShadow: "0 0.15rem 0.5rem rgba(0, 0, 0, 0.16)"
+      }, onClick && { cursor: "pointer !important" }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              justifyContent,
+              height: "24px",
+              color: "white",
+              display: "flex",
+              width: titleWidth,
+              overflow: "hidden",
+              padding: "0px 15px",
+              alignItems: "center",
+              flexDirection: "row",
+              borderRadius: borderTitle,
+              backgroundColor: titleColor
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 font-semibold! truncate!", children: /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  withArrow: true,
+                  radius: "md",
+                  label: title,
+                  arrowSize: 6,
+                  position: "top",
+                  arrowOffset: 15,
+                  disabled: !toolTip,
+                  color: titleColor,
+                  classNames: { tooltip: "text-xs!" },
+                  offset: { mainAxis: 11, crossAxis: -21 },
+                  transitionProps: { transition: "fade", duration: 100 },
+                  children: /* @__PURE__ */ jsx("span", { className: "block! truncate!", children: title })
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { children: icon })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+var card_default = Card;
+
+// src/components/ui/dialog/utils/constants.ts
+var DIALOG_BACKDROP_STYLE = {
+  backdropFilter: "blur(4px)",
+  backgroundColor: "rgba(0, 0, 0, 0.5)"
+};
+function Dialog({
+  open,
+  title,
+  onClose,
+  actions,
+  children,
+  maxWidth,
+  blurBackdrop = false
+}) {
+  const backdropStyle = blurBackdrop ? DIALOG_BACKDROP_STYLE : {};
+  return /* @__PURE__ */ jsxs(
+    DialogMui,
+    {
+      fullWidth: true,
+      open,
+      onClose,
+      maxWidth,
+      slotProps: { backdrop: { sx: backdropStyle } },
+      children: [
+        title && /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-black-de", children: title }) }),
+        /* @__PURE__ */ jsx(DialogContent, { className: "text-black", children }),
+        actions && /* @__PURE__ */ jsx(DialogActions, { children: actions })
+      ]
+    }
+  );
+}
+var dialog_default = Dialog;
+
+export { card_default, dialog_default };
+//# sourceMappingURL=chunk-CNXFSE26.mjs.map
+//# sourceMappingURL=chunk-CNXFSE26.mjs.map

package/dist/chunk-CNXFSE26.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/card/index.tsx","../src/components/ui/dialog/utils/constants.ts","../src/components/ui/dialog/index.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-CNXFSE26.mjs","sourcesContent":["import { cn } from \"@/functions\";\r\nimport { Box } from \"@mui/material\";\r\nimport { Tooltip } from \"@mantine/core\";\r\nimport type { CardProps } from \"./utils/interface\";\r\n\r\n/**\r\n * Container de UI com cabeçalho colorido (título e ícone opcionais) e área de conteúdo.\r\n *\r\n * O card usa MUI `Box` para dimensões, sombra e responsividade; classes Tailwind\r\n * extras podem ser passadas em `className` e são mescladas com `cn`. O título é\r\n * sempre exibido e truncado quando necessário; o tooltip (Mantine) só aparece se\r\n * `toolTip` for `true`.\r\n *\r\n * @param props - Propriedades do componente. Detalhes em {@link CardProps}.\r\n * @param props.width - Largura do card. Padrão: `\"100%\"`.\r\n * @param props.height - Altura do card. Padrão: `\"auto\"`.\r\n * @param props.margin - Margem externa.\r\n * @param props.title - Texto do cabeçalho.\r\n * @param props.toolTip - Habilita tooltip no título.\r\n * @param props.className - `className` nativo do React no container.\r\n * @param props.titleWidth - Largura da barra do cabeçalho. Padrão: `\"100%\"`.\r\n * @param props.titleColor - Cor de fundo do cabeçalho. Padrão: `var(--color-primary)`.\r\n * @param props.borderTitle - `border-radius` só do cabeçalho.\r\n * @param props.onClick - Clique no card; adiciona `cursor: pointer !important`.\r\n * @param props.borderRadius - `border-radius` do container.\r\n * @param props.icon - Conteúdo à direita do título.\r\n * @param props.children - Corpo do card.\r\n * @param props.justifyContent - Alinhamento título/ícone. Padrão: `\"space-between\"`.\r\n *\r\n * @returns Elemento `Box` com cabeçalho e `children`.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Card title=\"Resumo\" toolTip icon={<span>+</span>}>\r\n *   <p>Conteúdo interno</p>\r\n * </Card>\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * <Card\r\n *   title=\"Clique aqui\"\r\n *   width=\"320px\"\r\n *   onClick={() => alert(\"Card clicado\")}\r\n * >\r\n *   Card interativo\r\n * </Card>\r\n * ```\r\n */\r\nfunction Card({\r\n  margin,\r\n  onClick,\r\n  title,\r\n  toolTip,\r\n  className,\r\n  borderTitle,\r\n  children,\r\n  borderRadius,\r\n  width = \"100%\",\r\n  height = \"auto\",\r\n  titleWidth = \"100%\",\r\n  justifyContent = \"space-between\",\r\n  titleColor = \"var(--color-primary)\",\r\n  icon,\r\n}: Readonly<CardProps>): React.ReactElement {\r\n  return (\r\n    <Box\r\n      onClick={onClick}\r\n      className={cn(className, \"text-sm!\")}\r\n      sx={{\r\n        width,\r\n        margin,\r\n        height,\r\n        borderRadius,\r\n        \"@media (max-width: 768px)\": { width: \"100%\" },\r\n        boxShadow: \"0 0.15rem 0.5rem rgba(0, 0, 0, 0.16)\",\r\n        ...(onClick && { cursor: \"pointer !important\" }),\r\n      }}\r\n    >\r\n      <Box\r\n        sx={{\r\n          justifyContent,\r\n          height: \"24px\",\r\n          color: \"white\",\r\n          display: \"flex\",\r\n          width: titleWidth,\r\n          overflow: \"hidden\",\r\n          padding: \"0px 15px\",\r\n          alignItems: \"center\",\r\n          flexDirection: \"row\",\r\n          borderRadius: borderTitle,\r\n          backgroundColor: titleColor,\r\n        }}\r\n      >\r\n        <span className=\"min-w-0 flex-1 font-semibold! truncate!\">\r\n          <Tooltip\r\n            withArrow\r\n            radius=\"md\"\r\n            label={title}\r\n            arrowSize={6}\r\n            position=\"top\"\r\n            arrowOffset={15}\r\n            disabled={!toolTip}\r\n            color={titleColor}\r\n            classNames={{ tooltip: \"text-xs!\" }}\r\n            offset={{ mainAxis: 11, crossAxis: -21 }}\r\n            transitionProps={{ transition: \"fade\", duration: 100 }}\r\n          >\r\n            <span className=\"block! truncate!\">{title}</span>\r\n          </Tooltip>\r\n        </span>\r\n        <div>{icon}</div>\r\n      </Box>\r\n      {children}\r\n    </Box>\r\n  );\r\n}\r\nexport default Card;\r\n","export const DIALOG_BACKDROP_STYLE = {\r\n  backdropFilter: \"blur(4px)\",\r\n  backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n};\r\n\r\nconst dialogConstants = `\r\nModal de diálogo baseado no MUI \\`Dialog\\`, com título, conteúdo e ações opcionais.\r\nSuporta \\`maxWidth\\` e backdrop com blur via \\`blurBackdrop\\`.\r\n\r\n**Importação:**\r\n\\`\\`\\`tsx\r\nimport Dialog from \"@/components/ui/dialog\";\r\n// ou, no pacote publicado:\r\n// import { Dialog } from \"@grazziotin/react-components-next/ui\";\r\n\\`\\`\\`\r\n\r\n**Uso básico:**\r\n\\`\\`\\`tsx\r\nconst [open, setOpen] = useState(false);\r\n\r\n<Dialog\r\n  open={open}\r\n  title=\"Confirmar\"\r\n  onClose={() => setOpen(false)}\r\n  actions={<button type=\"button\">OK</button>}\r\n>\r\n  Conteúdo do diálogo\r\n</Dialog>\r\n\\`\\`\\`\r\n`;\r\n\r\nexport default dialogConstants;\r\n","import React from \"react\";\r\nimport DialogMui from \"@mui/material/Dialog\";\r\nimport type { DialogProps } from \"./utils/interface\";\r\nimport DialogTitle from \"@mui/material/DialogTitle\";\r\nimport DialogActions from \"@mui/material/DialogActions\";\r\nimport DialogContent from \"@mui/material/DialogContent\";\r\nimport { DIALOG_BACKDROP_STYLE } from \"./utils/constants\";\r\n\r\n/**\r\n * Modal de diálogo baseado no MUI `Dialog`, com título, conteúdo e ações opcionais.\r\n *\r\n * O componente usa `fullWidth` por padrão e permite limitar a largura via `maxWidth`.\r\n * Com `blurBackdrop`, o fundo recebe desfoque e overlay escuro semitransparente.\r\n *\r\n * @param props - Propriedades do componente. Detalhes em {@link DialogProps}.\r\n * @param props.open - Controla se o diálogo está visível.\r\n * @param props.title - Título exibido no topo; omitido se não informado.\r\n * @param props.onClose - Callback ao fechar (clique fora, ESC ou botão de fechar do MUI).\r\n * @param props.actions - Rodapé com botões ou ações customizadas.\r\n * @param props.children - Conteúdo principal do diálogo.\r\n * @param props.maxWidth - Largura máxima do MUI (`xs`, `sm`, `md`, `lg`, `xl` ou `false`).\r\n * @param props.blurBackdrop - Aplica blur e escurecimento no backdrop. Padrão: `false`.\r\n *\r\n * @returns Instância do `Dialog` do Material UI.\r\n *\r\n * @example\r\n * ```tsx\r\n * const [open, setOpen] = useState(false);\r\n *\r\n * <Dialog\r\n *   open={open}\r\n *   title=\"Confirmar exclusão\"\r\n *   onClose={() => setOpen(false)}\r\n *   actions={<Button onClick={() => setOpen(false)}>OK</Button>}\r\n * >\r\n *   Deseja realmente excluir este item?\r\n * </Dialog>\r\n * ```\r\n *\r\n * @example\r\n * ```tsx\r\n * <Dialog\r\n *   open={open}\r\n *   onClose={handleClose}\r\n *   maxWidth=\"sm\"\r\n *   blurBackdrop\r\n * >\r\n *   Conteúdo sem título.\r\n * </Dialog>\r\n * ```\r\n */\r\nfunction Dialog({\r\n  open,\r\n  title,\r\n  onClose,\r\n  actions,\r\n  children,\r\n  maxWidth,\r\n  blurBackdrop = false,\r\n}: Readonly<DialogProps>): React.ReactElement {\r\n  const backdropStyle = blurBackdrop ? DIALOG_BACKDROP_STYLE : {};\r\n\r\n  return (\r\n    <DialogMui\r\n      fullWidth\r\n      open={open}\r\n      onClose={onClose}\r\n      maxWidth={maxWidth}\r\n      slotProps={{ backdrop: { sx: backdropStyle } }}\r\n    >\r\n      {title && (\r\n        <DialogTitle>\r\n          <p className=\"text-sm font-semibold text-black-de\">{title}</p>\r\n        </DialogTitle>\r\n      )}\r\n      <DialogContent className=\"text-black\">{children}</DialogContent>\r\n      {actions && <DialogActions>{actions}</DialogActions>}\r\n    </DialogMui>\r\n  );\r\n}\r\n\r\nexport default Dialog;\r\n"]}

package/dist/chunk-NHHZBMJL.mjs

@@ -0,0 +1,64 @@
+import { twMerge } from 'tailwind-merge';
+import { clsx } from 'clsx';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function cn(...values) {
+  return twMerge(clsx(values));
+}
+
+// src/functions/nvl/nvl.ts
+function nvl(value, defaultValue) {
+  return value != null ? value : defaultValue;
+}
+
+// src/core/remove-digits.ts
+function removeDigits(value) {
+  return value.replace(/\D/g, "");
+}
+
+// src/functions/format-cpf-cnpj/format-cpf-cnpj.ts
+function formatCpfCnpj(data) {
+  if (!data) return "";
+  const value = removeDigits(data);
+  if (!value) return "";
+  if (value.length <= 11) {
+    const cpf = value.slice(0, 11);
+    return cpf.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
+  }
+  const cnpj = value.slice(0, 14);
+  return cnpj.replace(/^(\d{2})(\d)/, "$1.$2").replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1/$2").replace(/(\d{4})(\d)/, "$1-$2");
+}
+
+// src/functions/format-phone-br/format-phone-br.ts
+function formatPhoneBr(phone) {
+  if (!phone) return "";
+  const digits = removeDigits(phone).slice(0, 11);
+  if (!digits) return "";
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 6) {
+    return digits.replace(/(\d{2})(\d+)/, "($1) $2");
+  }
+  if (digits.length <= 10) {
+    return digits.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
+  }
+  return digits.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
+}
+
+export { __spreadValues, cn, formatCpfCnpj, formatPhoneBr, nvl };
+//# sourceMappingURL=chunk-NHHZBMJL.mjs.map
+//# sourceMappingURL=chunk-NHHZBMJL.mjs.map

package/dist/chunk-NHHZBMJL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/functions/cn/cn.ts","../src/functions/nvl/nvl.ts","../src/core/remove-digits.ts","../src/functions/format-cpf-cnpj/format-cpf-cnpj.ts","../src/functions/format-phone-br/format-phone-br.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAIO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;;;ACIO,SAAS,GAAA,CAAO,OAA6B,YAAA,EAAoB;AACtE,EAAA,OAAO,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,YAAA;AAClB;;;ACXO,SAAS,aAAa,KAAA,EAAuB;AAClD,EAAA,OAAO,KAAA,CAAM,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA;AAChC;;;ACOO,SAAS,cAAc,IAAA,EAAuB;AACnD,EAAA,IAAI,CAAC,MAAM,OAAO,EAAA;AAClB,EAAA,MAAM,KAAA,GAAQ,aAAa,IAAI,CAAA;AAE/B,EAAA,IAAI,CAAC,OAAO,OAAO,EAAA;AACnB,EAAA,IAAI,KAAA,CAAM,UAAU,EAAA,EAAI;AACtB,IAAA,MAAM,GAAA,GAAM,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA;AAC7B,IAAA,OAAO,GAAA,CACJ,OAAA,CAAQ,aAAA,EAAe,OAAO,CAAA,CAC9B,OAAA,CAAQ,aAAA,EAAe,OAAO,CAAA,CAC9B,OAAA,CAAQ,mBAAA,EAAqB,OAAO,CAAA;AAAA,EACzC;AAEA,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,EAAE,CAAA;AAC9B,EAAA,OAAO,IAAA,CACJ,OAAA,CAAQ,cAAA,EAAgB,OAAO,EAC/B,OAAA,CAAQ,uBAAA,EAAyB,UAAU,CAAA,CAC3C,QAAQ,eAAA,EAAiB,QAAQ,CAAA,CACjC,OAAA,CAAQ,eAAe,OAAO,CAAA;AACnC;;;ACnBO,SAAS,cAAc,KAAA,EAAwB;AACpD,EAAA,IAAI,CAAC,OAAO,OAAO,EAAA;AACnB,EAAA,MAAM,SAAS,YAAA,CAAa,KAAK,CAAA,CAAE,KAAA,CAAM,GAAG,EAAE,CAAA;AAE9C,EAAA,IAAI,CAAC,QAAQ,OAAO,EAAA;AACpB,EAAA,IAAI,MAAA,CAAO,MAAA,IAAU,CAAA,EAAG,OAAO,MAAA;AAC/B,EAAA,IAAI,MAAA,CAAO,UAAU,CAAA,EAAG;AACtB,IAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,cAAA,EAAgB,SAAS,CAAA;AAAA,EACjD;AACA,EAAA,IAAI,MAAA,CAAO,UAAU,EAAA,EAAI;AACvB,IAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,qBAAA,EAAuB,YAAY,CAAA;AAAA,EAC3D;AACA,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,qBAAA,EAAuB,YAAY,CAAA;AAC3D","file":"chunk-NHHZBMJL.mjs","sourcesContent":["import { twMerge } from \"tailwind-merge\";\r\nimport { clsx } from \"clsx\";\r\nimport type { ClassValue } from \"./utils/interfaces\";\r\n\r\nexport function cn(...values: ClassValue[]): string {\r\n  return twMerge(clsx(values));\r\n}\r\n","/**\r\n * Função NVL (Null Value Logic) - retorna valor padrão se o valor for null/undefined\r\n * @param {T | null | undefined} value - Valor a ser verificado\r\n * @param {T} defaultValue - Valor padrão a ser retornado se value for null/undefined\r\n * @returns {T} Value se não for null/undefined, senão defaultValue\r\n * @template T - Tipo do valor\r\n * @example\r\n * nvl(null, 'padrão') // Retorna: 'padrão'\r\n * nvl('valor', 'padrão') // Retorna: 'valor'\r\n */\r\nexport function nvl<T>(value: T | null | undefined, defaultValue: T): T {\r\n  return value ?? defaultValue;\r\n}\r\n","/** Remove tudo que não for dígito. */\r\nexport function removeDigits(value: string): string {\r\n  return value.replace(/\\D/g, \"\");\r\n}\r\n","import { removeDigits } from \"../../core/remove-digits\";\r\n\r\n/**\r\n * Formata CPF (até 11 dígitos) ou CNPJ (12–14 dígitos) conforme o tamanho.\r\n * @param data - Valor com ou sem formatação\r\n * @returns CPF `000.000.000-00` ou CNPJ `00.000.000/0000-00`; string vazia se ausente\r\n * @example\r\n * formatCpfCnpj(\"12345678901\") // \"123.456.789-01\"\r\n * formatCpfCnpj(\"12345678000199\") // \"12.345.678/0001-99\"\r\n */\r\nexport function formatCpfCnpj(data?: string): string {\r\n  if (!data) return \"\";\r\n  const value = removeDigits(data);\r\n\r\n  if (!value) return \"\";\r\n  if (value.length <= 11) {\r\n    const cpf = value.slice(0, 11);\r\n    return cpf\r\n      .replace(/(\\d{3})(\\d)/, \"$1.$2\")\r\n      .replace(/(\\d{3})(\\d)/, \"$1.$2\")\r\n      .replace(/(\\d{3})(\\d{1,2})$/, \"$1-$2\");\r\n  }\r\n\r\n  const cnpj = value.slice(0, 14);\r\n  return cnpj\r\n    .replace(/^(\\d{2})(\\d)/, \"$1.$2\")\r\n    .replace(/^(\\d{2})\\.(\\d{3})(\\d)/, \"$1.$2.$3\")\r\n    .replace(/\\.(\\d{3})(\\d)/, \".$1/$2\")\r\n    .replace(/(\\d{4})(\\d)/, \"$1-$2\");\r\n}\r\n","import { removeDigits } from \"../../core/remove-digits\";\r\n\r\n/**\r\n * Formata telefone brasileiro (até 11 dígitos): fixo `(00) 0000-0000` ou celular `(00) 00000-0000`.\r\n * @param phone - Valor com ou sem formatação\r\n * @returns Telefone formatado ou string vazia se ausente\r\n * @example\r\n * formatPhoneBr(\"11987654321\") // \"(11) 98765-4321\"\r\n * formatPhoneBr(\"1133334444\") // \"(11) 3333-4444\"\r\n */\r\nexport function formatPhoneBr(phone?: string): string {\r\n  if (!phone) return \"\";\r\n  const digits = removeDigits(phone).slice(0, 11);\r\n\r\n  if (!digits) return \"\";\r\n  if (digits.length <= 2) return digits;\r\n  if (digits.length <= 6) {\r\n    return digits.replace(/(\\d{2})(\\d+)/, \"($1) $2\");\r\n  }\r\n  if (digits.length <= 10) {\r\n    return digits.replace(/(\\d{2})(\\d{4})(\\d+)/, \"($1) $2-$3\");\r\n  }\r\n  return digits.replace(/(\\d{2})(\\d{5})(\\d+)/, \"($1) $2-$3\");\r\n}\r\n"]}

package/dist/functions/index.d.mts

@@ -0,0 +1,38 @@
+import { ClassValue } from 'clsx';
+export { ClassValue } from 'clsx';
+
+declare function cn(...values: ClassValue[]): string;
+
+/**
+ * Função NVL (Null Value Logic) - retorna valor padrão se o valor for null/undefined
+ * @param {T | null | undefined} value - Valor a ser verificado
+ * @param {T} defaultValue - Valor padrão a ser retornado se value for null/undefined
+ * @returns {T} Value se não for null/undefined, senão defaultValue
+ * @template T - Tipo do valor
+ * @example
+ * nvl(null, 'padrão') // Retorna: 'padrão'
+ * nvl('valor', 'padrão') // Retorna: 'valor'
+ */
+declare function nvl<T>(value: T | null | undefined, defaultValue: T): T;
+
+/**
+ * Formata CPF (até 11 dígitos) ou CNPJ (12–14 dígitos) conforme o tamanho.
+ * @param data - Valor com ou sem formatação
+ * @returns CPF `000.000.000-00` ou CNPJ `00.000.000/0000-00`; string vazia se ausente
+ * @example
+ * formatCpfCnpj("12345678901") // "123.456.789-01"
+ * formatCpfCnpj("12345678000199") // "12.345.678/0001-99"
+ */
+declare function formatCpfCnpj(data?: string): string;
+
+/**
+ * Formata telefone brasileiro (até 11 dígitos): fixo `(00) 0000-0000` ou celular `(00) 00000-0000`.
+ * @param phone - Valor com ou sem formatação
+ * @returns Telefone formatado ou string vazia se ausente
+ * @example
+ * formatPhoneBr("11987654321") // "(11) 98765-4321"
+ * formatPhoneBr("1133334444") // "(11) 3333-4444"
+ */
+declare function formatPhoneBr(phone?: string): string;
+
+export { cn, formatCpfCnpj, formatPhoneBr, nvl };

package/dist/functions/index.d.ts

@@ -0,0 +1,38 @@
+import { ClassValue } from 'clsx';
+export { ClassValue } from 'clsx';
+
+declare function cn(...values: ClassValue[]): string;
+
+/**
+ * Função NVL (Null Value Logic) - retorna valor padrão se o valor for null/undefined
+ * @param {T | null | undefined} value - Valor a ser verificado
+ * @param {T} defaultValue - Valor padrão a ser retornado se value for null/undefined
+ * @returns {T} Value se não for null/undefined, senão defaultValue
+ * @template T - Tipo do valor
+ * @example
+ * nvl(null, 'padrão') // Retorna: 'padrão'
+ * nvl('valor', 'padrão') // Retorna: 'valor'
+ */
+declare function nvl<T>(value: T | null | undefined, defaultValue: T): T;
+
+/**
+ * Formata CPF (até 11 dígitos) ou CNPJ (12–14 dígitos) conforme o tamanho.
+ * @param data - Valor com ou sem formatação
+ * @returns CPF `000.000.000-00` ou CNPJ `00.000.000/0000-00`; string vazia se ausente
+ * @example
+ * formatCpfCnpj("12345678901") // "123.456.789-01"
+ * formatCpfCnpj("12345678000199") // "12.345.678/0001-99"
+ */
+declare function formatCpfCnpj(data?: string): string;
+
+/**
+ * Formata telefone brasileiro (até 11 dígitos): fixo `(00) 0000-0000` ou celular `(00) 00000-0000`.
+ * @param phone - Valor com ou sem formatação
+ * @returns Telefone formatado ou string vazia se ausente
+ * @example
+ * formatPhoneBr("11987654321") // "(11) 98765-4321"
+ * formatPhoneBr("1133334444") // "(11) 3333-4444"
+ */
+declare function formatPhoneBr(phone?: string): string;
+
+export { cn, formatCpfCnpj, formatPhoneBr, nvl };