maquinaweb-ui 1.3.0 → 2.0.0

package/README.md

@@ -174,6 +174,81 @@ npm login
 bunx semantic-release
 ```
 
+## 🎯 Client vs Server Components
+
+Esta biblioteca suporta tanto **Client Components** quanto **Server Components** do Next.js.
+
+### Client Components (Atual)
+
+Componentes atuais usam `'use client'` porque precisam de:
+- ✅ React hooks (useState, useEffect, etc.)
+- ✅ Event handlers (onClick, onChange, etc.)
+- ✅ Animações com Motion
+- ✅ Bibliotecas client-only
+
+**Estrutura de um Client Component:**
+```tsx
+// src/components/my-client-component/index.ts
+'use client';  // ← Diretiva necessária
+
+export { MyClientComponent } from './my-client-component';
+```
+
+```tsx
+// src/components/my-client-component/my-client-component.tsx
+'use client';  // ← Diretiva necessária
+
+import { useState } from 'react';
+
+export const MyClientComponent = () => {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+};
+```
+
+### Server Components (Futuro)
+
+Para componentes que **não precisam** de interatividade:
+- ✅ Componentes puramente visuais
+- ✅ Layouts e containers estáticos
+- ✅ Componentes que apenas exibem dados
+
+**Estrutura de um Server Component:**
+```tsx
+// src/components/my-server-component/index.ts
+// SEM 'use client'  ← Pode ser renderizado no servidor
+
+export { MyServerComponent } from './my-server-component';
+```
+
+```tsx
+// src/components/my-server-component/my-server-component.tsx
+// SEM 'use client'
+
+export const MyServerComponent = ({ title, children }) => {
+  return (
+    <div className="card">
+      <h3>{title}</h3>
+      {children}
+    </div>
+  );
+};
+```
+
+### Decisão: Client ou Server?
+
+| Recurso | Client | Server |
+|---------|--------|--------|
+| React Hooks (useState, useEffect) | ✅ | ❌ |
+| Event Handlers (onClick, onChange) | ✅ | ❌ |
+| Motion/Framer Motion | ✅ | ❌ |
+| Browser APIs (window, document) | ✅ | ❌ |
+| Apenas exibição de dados | ✅ | ✅ |
+| SEO otimizado | ⚠️ | ✅ |
+| Menor bundle size | ⚠️ | ✅ |
+
+**📖 Para mais detalhes, veja [ARCHITECTURE.md](./ARCHITECTURE.md)**
+
 ## 📝 Adding New Components
 
 ### 🤖 Automático - Exports são Gerados Automaticamente!
@@ -274,31 +349,47 @@ TypeScript configuration:
 
 After installing your published package:
 
-### Basic Import (All Components)
+### ⚠️ Important: Esta biblioteca usa **apenas imports individuais**
+
+Não existe um export principal. Você **deve** importar de cada componente específico:
 
 ```tsx
-import { TextField, ContainerAnimation } from "maquinaweb-ui";
+// ✅ Correto - Import individual de cada componente
+import { TextField, InputText } from "maquinaweb-ui/text-field";
+import { ContainerAnimation } from "maquinaweb-ui/container-animation";
+import { SplitTextPoor } from "maquinaweb-ui/split-text-poor";
 
 function App() {
   return (
     <ContainerAnimation>
+      <SplitTextPoor>
+        <h1>Hello World</h1>
+      </SplitTextPoor>
       <TextField name="email" label="Email" />
     </ContainerAnimation>
   );
 }
 ```
 
-### Tree-shakable Imports (Optimized)
+```tsx
+// ❌ Errado - Não há export principal
+import { TextField } from "maquinaweb-ui"; // Isso NÃO vai funcionar
+```
 
-This library supports multiple entrypoints for better tree-shaking:
+### 🎯 Benefícios dos Imports Individuais
 
-```tsx
-// Import only form components (~2.85 kB)
-import { TextField, InputText } from "maquinaweb-ui/text-field";
+1. **Tree-shaking perfeito** - Só importa o que você usa
+2. **Bundle size menor** - Cada componente é um bundle separado
+3. **Auto-imports corretos** - IDEs sugerem o import correto automaticamente
+4. **Tipos otimizados** - TypeScript carrega apenas os tipos necessários
 
-// Import only animation components (~1.54 kB)
-import { ContainerAnimation } from "maquinaweb-ui/animation";
-```
+### 📦 Tamanhos dos Bundles
+
+| Componente | Tamanho (gzipped) |
+|------------|-------------------|
+| `text-field` | ~2.85 kB |
+| `container-animation` | ~1.54 kB |
+| `split-text-poor` | ~0.87 kB |
 
 **📖 For detailed usage and bundle size comparison, see [ENTRYPOINTS.md](./ENTRYPOINTS.md)**
 

package/dist/container-animation.d.ts

@@ -1,2 +1,29 @@
-import { ContainerAnimation, ContainerAnimationProps } from "./index-BC9dAmE_.js";
-export { ContainerAnimation, ContainerAnimationProps };
+import * as react2 from "react";
+import { ComponentProps, ElementType } from "react";
+
+//#region src/components/container-animation/container-animation.d.ts
+type ContainerAnimationProps<T extends ElementType = 'div'> = ComponentProps<'div'> & ComponentProps<T> & {
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  delay?: number;
+  space?: number;
+  duration?: number;
+  distance?: [number, number];
+  hideNotInView?: boolean;
+  as?: T | string;
+  className?: string;
+};
+declare const ContainerAnimation: <T extends ElementType = "div">({
+  className,
+  children,
+  position,
+  delay,
+  space,
+  duration,
+  as: As,
+  distance,
+  hideNotInView,
+  ...props
+}: ContainerAnimationProps<T>) => react2.JSX.Element;
+//#endregion
+export { ContainerAnimation, type ContainerAnimationProps };
+//# sourceMappingURL=container-animation.d.ts.map

package/dist/container-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-animation.d.ts","names":[],"sources":["../src/components/container-animation/container-animation.tsx"],"sourcesContent":[],"mappings":";;;;KAiDY,kCAAkC,uBAC5C,wBACE,eAAe;;;EAFP,KAAA,CAAA,EAAA,MAAA;EAAuB,QAAA,CAAA,EAAA,MAAA;UAAW,CAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA;eAC5C,CAAA,EAAA,OAAA;KACiB,EAOR,CAPQ,GAAA,MAAA;WAAf,CAAA,EAAA,MAAA;;cAWE,kBAJM,EAAA,CAAA,UAI0B,WAJ1B,GAAA,KAAA,CAAA,CAAA;EAAA,SAAA;EAAA,QAAA;EAAA,QAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,EAAA,EAI+C,EAJ/C;EAAA,QAAA;EAAA,aAAA;EAAA,GAAA;AAAA,CAAA,EAeT,uBAfS,CAee,CAff,CAAA,EAAA,GAeiB,MAAA,CAAA,GAAA,CAAA,OAfjB"}

package/dist/container-animation.js

@@ -1,4 +1,123 @@
-import "./utils-C0f9Ma6r.js";
-import { ContainerAnimation } from "./container-animation-BbZk1MyR.js";
+'use client';
 
-export { ContainerAnimation };
+
+import { cn } from "./utils-C0f9Ma6r.js";
+import { useEffect, useRef, useState } from "react";
+import * as motion from "motion/react-m";
+
+//#region node_modules/motion-dom/dist/es/utils/resolve-elements.mjs
+function resolveElements(elementOrSelector, scope, selectorCache) {
+	if (elementOrSelector instanceof EventTarget) return [elementOrSelector];
+	else if (typeof elementOrSelector === "string") {
+		let root = document;
+		if (scope) root = scope.current;
+		const elements = selectorCache?.[elementOrSelector] ?? root.querySelectorAll(elementOrSelector);
+		return elements ? Array.from(elements) : [];
+	}
+	return Array.from(elementOrSelector);
+}
+
+//#endregion
+//#region node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs
+const thresholds = {
+	some: 0,
+	all: 1
+};
+function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
+	const elements = resolveElements(elementOrSelector);
+	const activeIntersections = /* @__PURE__ */ new WeakMap();
+	const onIntersectionChange = (entries) => {
+		entries.forEach((entry) => {
+			const onEnd = activeIntersections.get(entry.target);
+			/**
+			* If there's no change to the intersection, we don't need to
+			* do anything here.
+			*/
+			if (entry.isIntersecting === Boolean(onEnd)) return;
+			if (entry.isIntersecting) {
+				const newOnEnd = onStart(entry.target, entry);
+				if (typeof newOnEnd === "function") activeIntersections.set(entry.target, newOnEnd);
+				else observer.unobserve(entry.target);
+			} else if (typeof onEnd === "function") {
+				onEnd(entry);
+				activeIntersections.delete(entry.target);
+			}
+		});
+	};
+	const observer = new IntersectionObserver(onIntersectionChange, {
+		root,
+		rootMargin,
+		threshold: typeof amount === "number" ? amount : thresholds[amount]
+	});
+	elements.forEach((element) => observer.observe(element));
+	return () => observer.disconnect();
+}
+
+//#endregion
+//#region node_modules/framer-motion/dist/es/utils/use-in-view.mjs
+function useInView(ref, { root, margin, amount, once = false, initial = false } = {}) {
+	const [isInView, setInView] = useState(initial);
+	useEffect(() => {
+		if (!ref.current || once && isInView) return;
+		const onEnter = () => {
+			setInView(true);
+			return once ? void 0 : () => setInView(false);
+		};
+		const options = {
+			root: root && root.current || void 0,
+			margin,
+			amount
+		};
+		return inView(ref.current, onEnter, options);
+	}, [
+		root,
+		ref,
+		margin,
+		once,
+		amount
+	]);
+	return isInView;
+}
+
+//#endregion
+//#region src/components/container-animation/container-animation.tsx
+const getVariants = (position, space, delay) => {
+	const directions = {
+		top: { transform: `translateY(${space}px)` },
+		bottom: { transform: `translateY(-${space}px)` },
+		left: { transform: `translateX(${space}px)` },
+		right: { transform: `translateX(-${space}px)` }
+	};
+	return {
+		hidden: {
+			opacity: 0,
+			filter: "blur(6px)",
+			...directions[position] || directions.top
+		},
+		visible: {
+			opacity: 1,
+			filter: "blur(0px)",
+			transform: "translateY(0px) translateX(0px)",
+			transition: {
+				delay,
+				duration: .5,
+				staggerChildren: .1
+			}
+		}
+	};
+};
+const ContainerAnimation = ({ className, children, position = "top", delay = 0, space = 20, duration = .8, as: As = "div", distance = [95, 5], hideNotInView = false,...props }) => {
+	const ref = useRef(null);
+	const isInView = useInView(ref, {
+		once: true,
+		margin: `-${100 - (distance[0] || 0)}% 0% -${distance[1] || 0}% 0%`
+	});
+	const variants = getVariants(position, space, delay);
+	return <motion.div animate={isInView ? "visible" : "hidden"} className={cn("initial-opacity", className)} initial="hidden" transition={{ duration }} variants={variants} {...props} ref={ref}>
+      {(!hideNotInView || isInView) && children}
+    </motion.div>;
+};
+
+//#endregion
+export { ContainerAnimation };
+//# sourceMappingURL=container-animation.js.map

package/dist/container-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-animation.js","names":[],"sources":["../node_modules/motion-dom/dist/es/utils/resolve-elements.mjs","../node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs","../node_modules/framer-motion/dist/es/utils/use-in-view.mjs","../src/components/container-animation/container-animation.tsx"],"sourcesContent":["function resolveElements(elementOrSelector, scope, selectorCache) {\n    if (elementOrSelector instanceof EventTarget) {\n        return [elementOrSelector];\n    }\n    else if (typeof elementOrSelector === \"string\") {\n        let root = document;\n        if (scope) {\n            root = scope.current;\n        }\n        const elements = selectorCache?.[elementOrSelector] ??\n            root.querySelectorAll(elementOrSelector);\n        return elements ? Array.from(elements) : [];\n    }\n    return Array.from(elementOrSelector);\n}\n\nexport { resolveElements };\n","import { resolveElements } from 'motion-dom';\n\nconst thresholds = {\n    some: 0,\n    all: 1,\n};\nfunction inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = \"some\" } = {}) {\n    const elements = resolveElements(elementOrSelector);\n    const activeIntersections = new WeakMap();\n    const onIntersectionChange = (entries) => {\n        entries.forEach((entry) => {\n            const onEnd = activeIntersections.get(entry.target);\n            /**\n             * If there's no change to the intersection, we don't need to\n             * do anything here.\n             */\n            if (entry.isIntersecting === Boolean(onEnd))\n                return;\n            if (entry.isIntersecting) {\n                const newOnEnd = onStart(entry.target, entry);\n                if (typeof newOnEnd === \"function\") {\n                    activeIntersections.set(entry.target, newOnEnd);\n                }\n                else {\n                    observer.unobserve(entry.target);\n                }\n            }\n            else if (typeof onEnd === \"function\") {\n                onEnd(entry);\n                activeIntersections.delete(entry.target);\n            }\n        });\n    };\n    const observer = new IntersectionObserver(onIntersectionChange, {\n        root,\n        rootMargin,\n        threshold: typeof amount === \"number\" ? amount : thresholds[amount],\n    });\n    elements.forEach((element) => observer.observe(element));\n    return () => observer.disconnect();\n}\n\nexport { inView };\n","\"use client\";\nimport { useState, useEffect } from 'react';\nimport { inView } from '../render/dom/viewport/index.mjs';\n\nfunction useInView(ref, { root, margin, amount, once = false, initial = false, } = {}) {\n    const [isInView, setInView] = useState(initial);\n    useEffect(() => {\n        if (!ref.current || (once && isInView))\n            return;\n        const onEnter = () => {\n            setInView(true);\n            return once ? undefined : () => setInView(false);\n        };\n        const options = {\n            root: (root && root.current) || undefined,\n            margin,\n            amount,\n        };\n        return inView(ref.current, onEnter, options);\n    }, [root, ref, margin, once, amount]);\n    return isInView;\n}\n\nexport { useInView };\n","'use client';\n\nimport { type ComponentProps, type ElementType, useRef } from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { useInView } from 'motion/react';\nimport * as motion from 'motion/react-m';\n\nconst getVariants = (\n  position: 'top' | 'bottom' | 'left' | 'right',\n  space: number,\n  delay: number\n) => {\n  const directions = {\n    top: {\n      transform: `translateY(${space}px)`,\n    },\n    bottom: {\n      transform: `translateY(-${space}px)`,\n    },\n    left: {\n      transform: `translateX(${space}px)`,\n    },\n    right: {\n      transform: `translateX(-${space}px)`,\n    },\n  };\n\n  const dir = directions[position] || directions.top;\n\n  return {\n    hidden: {\n      opacity: 0,\n      filter: 'blur(6px)',\n      ...dir,\n    },\n    visible: {\n      opacity: 1,\n      filter: 'blur(0px)',\n      transform: 'translateY(0px) translateX(0px)',\n      transition: {\n        delay,\n        duration: 0.5,\n        staggerChildren: 0.1,\n      },\n    },\n  };\n};\n\nexport type ContainerAnimationProps<T extends ElementType = 'div'> =\n  ComponentProps<'div'> &\n    ComponentProps<T> & {\n      position?: 'top' | 'bottom' | 'left' | 'right';\n      delay?: number;\n      space?: number;\n      duration?: number;\n      distance?: [number, number];\n      hideNotInView?: boolean;\n      as?: T | string;\n      className?: string;\n    };\n\nconst ContainerAnimation = <T extends ElementType = 'div'>({\n  className,\n  children,\n  position = 'top',\n  delay = 0,\n  space = 20,\n  duration = 0.8,\n  as: As = 'div',\n  distance = [95, 5],\n  hideNotInView = false,\n  ...props\n}: ContainerAnimationProps<T>) => {\n  const ref = useRef<HTMLElement>(null);\n  const isInView = useInView(ref, {\n    once: true,\n    margin:\n      `-${100 - (distance[0] || 0)}% 0% -${(distance[1] as number) || 0}% 0%` as any,\n  });\n\n  const variants = getVariants(position, space, delay);\n\n  return (\n    <motion.div\n      animate={isInView ? 'visible' : 'hidden'}\n      className={cn('initial-opacity', className)}\n      initial=\"hidden\"\n      transition={{ duration }}\n      variants={variants}\n      {...props}\n      ref={ref}\n    >\n      {(!hideNotInView || isInView) && children}\n    </motion.div>\n  );\n};\n\nexport { ContainerAnimation };\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}

package/dist/split-text-poor.d.ts

@@ -0,0 +1,59 @@
+//#region src/components/split-text-poor/split-text-poor.d.ts
+declare const configs: {
+  sm: {
+    hidden: {
+      transform: string;
+      filter: string;
+      opacity: number;
+    };
+    visible: ({
+      index,
+      delay
+    }: {
+      index: number;
+      delay: number;
+    }) => {
+      transform: string;
+      filter: string;
+      opacity: number;
+      transition: {
+        duration: number;
+        delay: number;
+      };
+    };
+  };
+  default: {
+    hidden: {
+      transform: string;
+      opacity: number;
+      filter: string;
+    };
+    visible: ({
+      index,
+      delay
+    }: {
+      index: number;
+      delay: number;
+    }) => {
+      transform: string;
+      opacity: number;
+      filter: string;
+      transition: {
+        duration: number;
+        delay: number;
+      };
+    };
+  };
+};
+type SplitTextPoorProps = {
+  children: React.ReactNode;
+  className?: string;
+  config?: keyof typeof configs;
+  split?: string;
+  delay?: number;
+  as?: any;
+};
+declare const SplitTextPoor: React.FC<SplitTextPoorProps>;
+//#endregion
+export { SplitTextPoor, type SplitTextPoorProps };
+//# sourceMappingURL=split-text-poor.d.ts.map

package/dist/split-text-poor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-text-poor.d.ts","names":[],"sources":["../src/components/split-text-poor/split-text-poor.tsx"],"sourcesContent":[],"mappings":";cAwBM;EAAA,EAAA,EAAA;IAkBL,MAAA,EAAA;;;;;;;;IAGW;MADA,KAAA,EAAA,MAAkB;MAAA,KAAA,EAAA,MAAA;IAClB,CAAA,EAAA,GAAM;MAEM,SAAA,EAAA,MAAA;MAAO,MAAA,EAAA,MAAA;MAMzB,OAAA,EAuDL,MAAA;MAAA,UAAA,EAAA;QAvD6B,QAAA,EAAA,MAAA;QAAH,KAAA,EAAA,MAAA;MAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KATjB,kBAAA;YACA,KAAA,CAAM;;wBAEM;;;;;cAMlB,eAAe,KAAA,CAAM,GAAG"}

package/dist/split-text-poor.js

@@ -0,0 +1,71 @@
+'use client';
+
+
+import { cn } from "./utils-C0f9Ma6r.js";
+import { Children, cloneElement, isValidElement } from "react";
+import * as motion from "motion/react-m";
+
+//#region src/components/split-text-poor/split-text-poor.tsx
+const defaultConfig = {
+	hidden: {
+		transform: "translateY(20px) skewY(6deg)",
+		opacity: 0,
+		filter: "blur(7px)"
+	},
+	visible: ({ index, delay }) => ({
+		transform: "translateY(0px) skewY(0deg)",
+		opacity: 1,
+		filter: "blur(0px)",
+		transition: {
+			duration: .4,
+			delay: index * .08 + delay
+		}
+	})
+};
+const configs = {
+	sm: {
+		hidden: {
+			transform: "translateY(10px)",
+			filter: "blur(7px)",
+			opacity: 0
+		},
+		visible: ({ index, delay }) => ({
+			transform: "translateY(0px)",
+			filter: "blur(0px)",
+			opacity: 1,
+			transition: {
+				duration: .4,
+				delay: index * .06 + delay
+			}
+		})
+	},
+	default: defaultConfig
+};
+const SplitTextPoor = ({ children, className, config = "default", as: As = "div", split = " ", delay = 0 }) => {
+	const selectedConfig = configs[config] || defaultConfig;
+	let wordIndex = 0;
+	const wrapWords = (node) => {
+		if (typeof node === "string") return node.split(split).map((word, index) => {
+			wordIndex++;
+			return <motion.span custom={{
+				index: wordIndex - 1,
+				delay
+			}} initial="hidden" key={index} style={{
+				display: "inline-block",
+				whiteSpace: "nowrap"
+			}} variants={selectedConfig} viewport={{ once: true }} whileInView="visible">
+            {word}
+            {index < node.split(split).length - 1 && "\xA0"}
+          </motion.span>;
+		});
+		if (isValidElement(node)) return cloneElement(node, { children: Children.map(node.props.children, wrapWords) });
+		return node;
+	};
+	return <As className={cn(className, "initial-opacity will-change-[transform,filter]")} style={{ display: "inline-block" }}>
+      {Children.map(children, wrapWords)}
+    </As>;
+};
+
+//#endregion
+export { SplitTextPoor };
+//# sourceMappingURL=split-text-poor.js.map

package/dist/split-text-poor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-text-poor.js","names":["SplitTextPoor: React.FC<SplitTextPoorProps>"],"sources":["../src/components/split-text-poor/split-text-poor.tsx"],"sourcesContent":["'use client';\n\nimport { Children, cloneElement, isValidElement } from 'react';\n\nimport { cn } from '@/lib/utils';\nimport * as motion from 'motion/react-m';\n\nconst defaultConfig = {\n  hidden: {\n    transform: 'translateY(20px) skewY(6deg)',\n    opacity: 0,\n    filter: 'blur(7px)',\n  },\n  visible: ({ index, delay }: { index: number; delay: number }) => ({\n    transform: 'translateY(0px) skewY(0deg)',\n    opacity: 1,\n    filter: 'blur(0px)',\n    transition: {\n      duration: 0.4,\n      delay: index * 0.08 + delay,\n    },\n  }),\n};\n\nconst configs = {\n  sm: {\n    hidden: {\n      transform: 'translateY(10px)',\n      filter: 'blur(7px)',\n      opacity: 0,\n    },\n    visible: ({ index, delay }: { index: number; delay: number }) => ({\n      transform: 'translateY(0px)',\n      filter: 'blur(0px)',\n      opacity: 1,\n      transition: {\n        duration: 0.4,\n        delay: index * 0.06 + delay,\n      },\n    }),\n  },\n  default: defaultConfig,\n};\n\nexport type SplitTextPoorProps = {\n  children: React.ReactNode;\n  className?: string;\n  config?: keyof typeof configs;\n  split?: string;\n  delay?: number;\n  as?: any;\n};\n\nconst SplitTextPoor: React.FC<SplitTextPoorProps> = ({\n  children,\n  className,\n  config = 'default',\n  as: As = 'div',\n  split = ' ',\n  delay = 0,\n}) => {\n  const selectedConfig = configs[config] || defaultConfig;\n  let wordIndex = 0;\n\n  const wrapWords = (node: React.ReactNode): React.ReactNode => {\n    if (typeof node === 'string') {\n      return node.split(split).map((word, index) => {\n        wordIndex++;\n        return (\n          <motion.span\n            custom={{\n              index: wordIndex - 1,\n              delay,\n            }}\n            initial=\"hidden\"\n            key={index}\n            style={{ display: 'inline-block', whiteSpace: 'nowrap' }}\n            variants={selectedConfig}\n            viewport={{ once: true }}\n            whileInView=\"visible\"\n          >\n            {word}\n            {index < node.split(split).length - 1 && '\\u00A0'}\n          </motion.span>\n        );\n      });\n    }\n\n    if (isValidElement(node)) {\n      return cloneElement(node, {\n        children: Children.map((node.props as any).children, wrapWords),\n      } as any);\n    }\n\n    return node;\n  };\n\n  return (\n    <As\n      className={cn(\n        className,\n        'initial-opacity will-change-[transform,filter]'\n      )}\n      style={{ display: 'inline-block' }}\n    >\n      {Children.map(children, wrapWords)}\n    </As>\n  );\n};\n\nexport { SplitTextPoor };\n"],"mappings":";;;;;;;;AAOA,MAAM,gBAAgB;CACpB,QAAQ;EACN,WAAW;EACX,SAAS;EACT,QAAQ;EACT;CACD,UAAU,EAAE,OAAO,aAA+C;EAChE,WAAW;EACX,SAAS;EACT,QAAQ;EACR,YAAY;GACV,UAAU;GACV,OAAO,QAAQ,MAAO;GACvB;EACF;CACF;AAED,MAAM,UAAU;CACd,IAAI;EACF,QAAQ;GACN,WAAW;GACX,QAAQ;GACR,SAAS;GACV;EACD,UAAU,EAAE,OAAO,aAA+C;GAChE,WAAW;GACX,QAAQ;GACR,SAAS;GACT,YAAY;IACV,UAAU;IACV,OAAO,QAAQ,MAAO;IACvB;GACF;EACF;CACD,SAAS;CACV;AAWD,MAAMA,iBAA+C,EACnD,UACA,WACA,SAAS,WACT,IAAI,KAAK,OACT,QAAQ,KACR,QAAQ,QACJ;CACJ,MAAM,iBAAiB,QAAQ,WAAW;CAC1C,IAAI,YAAY;CAEhB,MAAM,aAAa,SAA2C;AAC5D,MAAI,OAAO,SAAS,SAClB,QAAO,KAAK,MAAM,MAAM,CAAC,KAAK,MAAM,UAAU;AAC5C;AACA,UACE,CAAC,OAAO,KACN,QAAQ;IACN,OAAO,YAAY;IACnB;IACD,EACD,iBACA,KAAK,OACL,OAAO;IAAE,SAAS;IAAgB,YAAY;IAAU,EACxD,UAAU,gBACV,UAAU,EAAE,MAAM,MAAM,EACxB,sBACD;aACE,KAAK;aACL,QAAQ,KAAK,MAAM,MAAM,CAAC,SAAS,KAAK,OAAS;UACpD,EAAE,OAAO;IAEX;AAGJ,MAAI,eAAe,KAAK,CACtB,QAAO,aAAa,MAAM,EACxB,UAAU,SAAS,IAAK,KAAK,MAAc,UAAU,UAAU,EAChE,CAAQ;AAGX,SAAO;;AAGT,QACE,CAAC,GACC,WAAW,GACT,WACA,iDACD,EACD,OAAO,EAAE,SAAS,gBAAgB,EACnC;OACE,SAAS,IAAI,UAAU,UAAU,CAAC;IACrC,EAAE"}

package/dist/text-field.d.ts

@@ -1,2 +1,81 @@
-import { InputText, InputTextProps, QueryTextField, QueryTextFieldProps, TextField, TextFieldProps } from "./index-D9G_ksi_.js";
-export { InputText, InputTextProps, QueryTextField, QueryTextFieldProps, TextField, TextFieldProps };
+import * as react0 from "react";
+import { FieldPath, FieldPathValue, FieldValues, UseControllerProps } from "react-hook-form";
+import { Options } from "use-mask-input";
+import { Options as Options$1 } from "nuqs";
+
+//#region src/components/text-field/TextField.d.ts
+type Mask = 'datetime' | 'email' | 'numeric' | 'currency' | 'decimal' | 'integer' | 'percentage' | 'url' | 'ip' | 'mac' | 'ssn' | 'brl-currency' | 'cpf' | 'cnpj' | (string & {}) | (string[] & {}) | null;
+interface InputTextProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  ref?: React.ForwardedRef<HTMLInputElement>;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  className?: string;
+  disabled?: boolean;
+  type?: string;
+  required?: boolean;
+  maskRef?: React.ForwardedRef<any>;
+  children?: React.ReactNode;
+  mask?: Mask;
+  maskOptions?: Options;
+  error?: React.ReactNode;
+  id?: string;
+  detail?: string;
+  detailClassName?: string;
+  inputClassName?: string;
+  help?: string;
+}
+declare function InputText({
+  label,
+  description,
+  placeholder,
+  className,
+  children,
+  disabled,
+  type,
+  required,
+  maskRef,
+  mask,
+  maskOptions,
+  error,
+  id,
+  ref,
+  detail,
+  detailClassName,
+  inputClassName,
+  help,
+  name,
+  ...props
+}: InputTextProps): react0.JSX.Element;
+interface TextFieldProps<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends UseControllerProps<TFieldValues, TFieldName> {
+  disabled?: boolean;
+  required?: boolean;
+  children?: React.ReactNode;
+  defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
+  onChange?: (value: string) => Promise<void> | void;
+  transform?: (value: string) => string;
+}
+declare function TextField<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+  name,
+  className,
+  required,
+  defaultValue,
+  onChange,
+  transform,
+  ...props
+}: TextFieldProps<TFieldValues, TFieldName> & Omit<InputTextProps, 'onChange'>): react0.JSX.Element;
+interface QueryTextFieldProps extends Omit<InputTextProps, 'onChange'> {
+  name: string;
+  defaultValue?: string;
+  options?: Options$1;
+  onChange?: (value: string) => void;
+}
+declare function QueryTextField({
+  name,
+  defaultValue,
+  options,
+  ...props
+}: QueryTextFieldProps): react0.JSX.Element;
+//#endregion
+export { InputText, type InputTextProps, QueryTextField, type QueryTextFieldProps, TextField, type TextFieldProps };
+//# sourceMappingURL=text-field.d.ts.map

package/dist/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","names":[],"sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":[],"mappings":";;;;;;KAqBK,IAAA;UAmBY,cAAA,SACP,KAAA,CAAM,oBAAoB;QAC5B,KAAA,CAAM,aAAa;EArBtB,KAAA,CAAA,EAAI,MAAA;EAmBQ,WAAA,CAAA,EAAA,MACf;EAAA,WAAA,CAAA,EAAA,MAAA;WAAkC,CAAA,EAAA,MAAA;UACT,CAAA,EAAA,OAAA;MAAnB,CAAA,EAAA,MAAM;UAQF,CAAM,EAAA,OAAA;SACL,CAAA,EADD,KAAA,CAAM,YACC,CAAA,GAAA,CAAA;UACV,CAAA,EADI,KAAA,CAAM,SACV;MACO,CAAA,EADP,IACO;aACA,CAAA,EADA,OACA;OAbN,CAAA,EAaA,KAAA,CAAM,SAbA;EAAmB,EAAA,CAAA,EAAA,MAAA;EAqB1B,MAAA,CAAA,EAAA,MAAS;EAAA,eAAA,CAAA,EAAA,MAAA;gBAChB,CAAA,EAAA,MAAA;MACA,CAAA,EAAA,MAAA;;iBAFO,SAAA,CAIP;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,SAAA;EAAA,QAAA;EAAA,QAAA;EAAA,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,IAAA;EAAA,WAAA;EAAA,KAAA;EAAA,EAAA;EAAA,GAAA;EAAA,MAAA;EAAA,eAAA;EAAA,cAAA;EAAA,IAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAiBC,cAjBD,CAAA,EAiBe,MAAA,CAAA,GAAA,CAAA,OAjBf;AACA,UA2Fe,cA3Ff,CAAA,qBA4FqB,WA5FrB,GA4FmC,WA5FnC,EAAA,mBA6FmB,SA7FnB,CA6F6B,YA7F7B,CAAA,GA6F6C,SA7F7C,CA6FuD,YA7FvD,CAAA,CAAA,SA8FQ,kBA9FR,CA8F2B,YA9F3B,EA8FyC,UA9FzC,CAAA,CAAA;UACA,CAAA,EAAA,OAAA;UACA,CAAA,EAAA,OAAA;UACA,CAAA,EA8FW,KAAA,CAAM,SA9FjB;cACA,CAAA,EA8Fe,cA9Ff,CA8F8B,YA9F9B,EA8F4C,UA9F5C,CAAA;UACA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GA8F8B,OA9F9B,CAAA,IAAA,CAAA,GAAA,IAAA;WACA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,MAAA;;iBAmGO,SAjGP,CAAA,qBAkGqB,WAlGrB,GAkGmC,WAlGnC,EAAA,mBAmGmB,SAnGnB,CAmG6B,YAnG7B,CAAA,GAmG6C,SAnG7C,CAmGuD,YAnGvD,CAAA,CAAA,CAAA;EAAA,IAAA;EAAA,SAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA4GC,cA5GD,CA4GgB,YA5GhB,EA4G8B,UA5G9B,CAAA,GA6GA,IA7GA,CA6GK,cA7GL,EAAA,UAAA,CAAA,CAAA,EA6GgC,MAAA,CAAA,GAAA,CAAA,OA7GhC;AACA,UA8Ie,mBAAA,SAA4B,IA9I3C,CA8IgD,cA9IhD,EAAA,UAAA,CAAA,CAAA;MACA,EAAA,MAAA;cACA,CAAA,EAAA,MAAA;SACA,CAAA,EA8IU,SA9IV;UACA,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;iBAiJO,cAAA,CA9IN;EAAA,IAAA;EAAA,YAAA;EAAA,OAAA;EAAA,GAAA;AAAA,CAAA,EAmJA,mBAnJA,CAAA,EAmJmB,MAAA,CAAA,GAAA,CAAA,OAnJnB"}