@arkyn/components 3.0.1-beta.139 → 3.0.1-beta.141

package/dist/components/cardTab/cardTabContext.d.ts

@@ -4,13 +4,13 @@ type CardTabContextProps = {
     currentTab: string;
     changeCurrentTab: (tab: string) => void;
 };
-type TabProviderProps = {
+type CardTabProviderProps = {
     children: ReactNode;
     disabled: boolean;
     currentTab: string;
     changeCurrentTab: (tab: string) => void;
 };
 declare function useCardTab(): CardTabContextProps;
-declare function TabProvider(props: TabProviderProps): import("react/jsx-runtime").JSX.Element;
-export { TabProvider, useCardTab };
+declare function CardTabProvider(props: CardTabProviderProps): import("react/jsx-runtime").JSX.Element;
+export { CardTabProvider, useCardTab };
 //# sourceMappingURL=cardTabContext.d.ts.map

package/dist/components/cardTab/cardTabContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cardTabContext.d.ts","sourceRoot":"","sources":["../../../src/components/cardTab/cardTabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAIF,iBAAS,UAAU,wBAElB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAM3C;AAED,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"cardTabContext.d.ts","sourceRoot":"","sources":["../../../src/components/cardTab/cardTabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAIF,iBAAS,UAAU,wBAElB;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAMnD;AAED,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/cardTab/cardTabContext.js

@@ -4,7 +4,7 @@ const CardTabContext = createContext({});
 function useCardTab() {
     return useContext(CardTabContext);
 }
-function TabProvider(props) {
+function CardTabProvider(props) {
     return (_jsx(CardTabContext.Provider, { value: props, children: props.children }));
 }
-export { TabProvider, useCardTab };
+export { CardTabProvider, useCardTab };

package/dist/components/checkbox/index.d.ts

@@ -2,6 +2,8 @@ import { ButtonHTMLAttributes } from "react";
 import "./styles.css";
 type CheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "prefix" | "type" | "name" | "defaultValue" | "value" | "onChange" | "onSelect" | "onClick"> & {
     label?: string;
+    showAsterisk?: boolean;
+    unShowFieldTemplate?: boolean;
     errorMessage?: string;
     size?: "md" | "lg" | "sm";
     name: string;
@@ -23,7 +25,9 @@ type CheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "pre
  * @param props.checked - Controlled checked state of the checkbox
  * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
  * @param props.onCheck - Callback function called when checkbox state changes, receives the value or empty string
- * @param props.orientation - Orientation of the checkbox and label. Default: "horizontalReverse"
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * **...Other valid HTML properties for button element (except type, name, defaultValue, value, onChange, onSelect, onClick)**
  *

package/dist/components/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAA2B,MAAM,OAAO,CAAC;AAOtE,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA8DrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAA2B,MAAM,OAAO,CAAC;AAKtE,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAsErC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox/index.js

@@ -2,9 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import { useId, useRef, useState } from "react";
 import { useForm } from "../../hooks/useForm";
-import { FieldWrapper } from "../fieldWrapper";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
+import { FieldTemplate } from "../../services/fieldTemplate";
 import "./styles.css";
 /**
  * Checkbox component - used for creating interactive checkbox inputs with customizable styling and validation
@@ -18,7 +16,9 @@ import "./styles.css";
  * @param props.checked - Controlled checked state of the checkbox
  * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
  * @param props.onCheck - Callback function called when checkbox state changes, receives the value or empty string
- * @param props.orientation - Orientation of the checkbox and label. Default: "horizontalReverse"
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * **...Other valid HTML properties for button element (except type, name, defaultValue, value, onChange, onSelect, onClick)**
  *
@@ -66,7 +66,7 @@ import "./styles.css";
  * ```
  */
 function Checkbox(props) {
-    const { id, name, className: wrapperClassName = "", size = "md", errorMessage: baseErrorMessage, defaultChecked = false, label, checked: baseChecked = null, onCheck, orientation = "horizontalReverse", value, ...rest } = props;
+    const { id, name, className: wrapperClassName = "", size = "md", errorMessage: baseErrorMessage, defaultChecked = false, label, checked: baseChecked = null, onCheck, orientation = "horizontalReverse", showAsterisk, unShowFieldTemplate, value, ...rest } = props;
     const { fieldErrors } = useForm();
     const checkboxRef = useRef(null);
     const checkboxId = id || useId();
@@ -82,6 +82,6 @@ function Checkbox(props) {
         setIsChecked(!defaultChecked);
         onCheck && onCheck(!defaultChecked ? value || "checked" : "");
     }
-    return (_jsxs(FieldWrapper, { orientation: orientation, className: wrapperClassName, children: [label && _jsx(FieldLabel, { htmlFor: checkboxId, children: label }), _jsxs("button", { id: checkboxId, type: "button", className: className, onClick: handleCheck, ...rest, children: [_jsx("input", { type: "hidden", name: name, ref: checkboxRef, value: currentChecked ? value || "checked" : "" }), _jsx(Check, {})] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs("button", { id: checkboxId, type: "button", className: className, onClick: handleCheck, ...rest, children: [_jsx("input", { type: "hidden", name: name, ref: checkboxRef, value: currentChecked ? value || "checked" : "" }), _jsx(Check, {})] }) }));
 }
 export { Checkbox };

package/dist/components/currencyInput/index.d.ts

@@ -8,8 +8,10 @@ type CurrencyInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "
     label?: string;
     errorMessage?: string;
     isLoading?: boolean;
+    unShowFieldTemplate?: boolean;
     size?: "md" | "lg";
     variant?: "solid" | "outline" | "underline";
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
     prefix?: string | LucideIcon;
     suffix?: string | LucideIcon;
     showAsterisk?: boolean;
@@ -40,6 +42,9 @@ type CurrencyInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "
  * @param props.value - Controlled value (number) for the input
  * @param props.defaultValue - Default value (number) for uncontrolled usage
  * @param props.onChange - Callback function called when value changes, receives event, original value and masked value
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ *
  *
  * **...Other valid HTML properties for input element (except type, max, defaultValue, value, onChange)**
  *

package/dist/components/currencyInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/currencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,WAAW,EACX,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAaf,OAAO,aAAa,CAAC;AAErB,KAAK,MAAM,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,cAAc,GACd,OAAO,GACP,UAAU,GACV,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACpC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAqK/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/currencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,WAAW,EACX,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAUf,OAAO,aAAa,CAAC;AAErB,KAAK,MAAM,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,kBAAkB,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,cAAc,GACd,OAAO,GACP,UAAU,GACV,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAE9D,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACpC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAuK/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/currencyInput/index.js

@@ -2,11 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
 import { useEffect, useId, useRef, useState, } from "react";
 import { useForm } from "../../hooks/useForm";
+import { FieldTemplate } from "../../services/fieldTemplate";
 import { IconRenderer } from "../../services/iconRenderer";
 import { maskCurrencyValues, normalizeValue, } from "../../services/maskCurrencyValues";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
 import "./style.css";
 /**
  * CurrencyInput component - used for currency input fields with automatic formatting based on locale
@@ -28,6 +26,9 @@ import "./style.css";
  * @param props.value - Controlled value (number) for the input
  * @param props.defaultValue - Default value (number) for uncontrolled usage
  * @param props.onChange - Callback function called when value changes, receives event, original value and masked value
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ *
  *
  * **...Other valid HTML properties for input element (except type, max, defaultValue, value, onChange)**
  *
@@ -82,7 +83,7 @@ import "./style.css";
  * ```
  */
 function CurrencyInput(props) {
-    const { name, disabled, title, style, variant = "solid", label, className: wrapperClassName = "", value, defaultValue, max = 1000000000, locale, onChange, prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, showAsterisk, rightIcon, size = "md", id, ...rest } = props;
+    const { name, disabled, title, style, variant = "solid", label, className: wrapperClassName = "", value, defaultValue, max = 1000000000, locale, onChange, prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, unShowFieldTemplate, orientation, showAsterisk, rightIcon, size = "md", id, ...rest } = props;
     const { fieldErrors } = useForm();
     const [isFocused, setIsFocused] = useState(false);
     const [maskedValue, setMaskedValue] = useState("0");
@@ -142,6 +143,6 @@ function CurrencyInput(props) {
     const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
     const focused = isFocused ? "focused" : "";
     const className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, className: className, onClick: handleSectionClick, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, id: inputId, placeholder: isDisabled ? maskedValue : undefined, value: isDisabled ? undefined : maskedValue, ...rest }), _jsx("input", { type: "hidden", name: name, value: normalizeValue(maskedValue), readOnly: true }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs("section", { title: title, style: style, className: className, onClick: handleSectionClick, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, id: inputId, placeholder: isDisabled ? maskedValue : undefined, value: isDisabled ? undefined : maskedValue, ...rest }), _jsx("input", { type: "hidden", name: name, value: normalizeValue(maskedValue), readOnly: true }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }) }));
 }
 export { CurrencyInput };

package/dist/components/imageUpload/index.d.ts

@@ -15,6 +15,8 @@ type ImageUploadProps = {
     fileResponseName?: string;
     acceptImage?: string;
     onChange?: (url: string) => void;
+    unShowFieldTemplate?: boolean;
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
  * ImageUpload component - specialized file upload component for image files with preview functionality
@@ -35,6 +37,8 @@ type ImageUploadProps = {
  * @param props.fileResponseName - Property name in the response object containing the image URL. Default: "url"
  * @param props.acceptImage - Image file types accepted by the input (e.g., "image/*", ".jpg,.png"). Default: "image/*"
  * @param props.onChange - Callback function called when image upload completes successfully, receives the image URL
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * @returns ImageUpload JSX element wrapped in FieldGroup with optional label, image preview, and error handling
  *

package/dist/components/imageUpload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/imageUpload/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAqG3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/imageUpload/index.tsx"],"names":[],"mappings":"AAOA,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA2G3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/imageUpload/index.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useForm } from "../../hooks/useForm";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
+import { FieldTemplate } from "../../services/fieldTemplate";
 import { HasFileContent } from "./hasFileContent";
 import { NoFileContent } from "./noFileContent";
 import "./styles.css";
@@ -26,6 +24,8 @@ import "./styles.css";
  * @param props.fileResponseName - Property name in the response object containing the image URL. Default: "url"
  * @param props.acceptImage - Image file types accepted by the input (e.g., "image/*", ".jpg,.png"). Default: "image/*"
  * @param props.onChange - Callback function called when image upload completes successfully, receives the image URL
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * @returns ImageUpload JSX element wrapped in FieldGroup with optional label, image preview, and error handling
  *
@@ -103,7 +103,7 @@ import "./styles.css";
  * ```
  */
 function ImageUpload(props) {
-    const { name, defaultValue = "", label, showAsterisk = false, action, fileName = "file", className: wrapperClassName = "", method = "POST", acceptImage = "image/*", fileResponseName = "url", changeImageButtonText = "Alterar imagem", selectImageButtonText = "Selecionar imagem", dropImageText = "Ou arraste e solte a imagem aqui", onChange, disabled = false, } = props;
+    const { name, defaultValue = "", label, showAsterisk = false, action, fileName = "file", className: wrapperClassName = "", method = "POST", acceptImage = "image/*", fileResponseName = "url", changeImageButtonText = "Alterar imagem", selectImageButtonText = "Selecionar imagem", dropImageText = "Ou arraste e solte a imagem aqui", onChange, disabled = false, unShowFieldTemplate = false, orientation = "horizontal", } = props;
     const { fieldErrors } = useForm();
     const fieldError = fieldErrors?.[name];
     const [value, setValue] = useState(defaultValue);
@@ -144,6 +144,6 @@ function ImageUpload(props) {
     const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
     const hasImageClassName = filePath ? "hasImage" : "noHasImage";
     const className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs("div", { className: className, children: [_jsx("input", { type: "hidden", name: name, value: value || "" }), !filePath && (_jsx(NoFileContent, { disabled: disabled, isLoading: isLoading, acceptImage: acceptImage, dropImageText: dropImageText, handleSelectFile: handleSelectFile, selectImageButtonText: selectImageButtonText })), filePath && (_jsx(HasFileContent, { disabled: disabled, isLoading: isLoading, acceptImage: acceptImage, filePath: filePath, handleSelectFile: handleSelectFile, changeImageButtonText: changeImageButtonText, reSendImage: !!errorMessage && file ? () => handleUploadImage(file) : undefined }))] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs("div", { className: className, children: [_jsx("input", { type: "hidden", name: name, value: value || "" }), !filePath && (_jsx(NoFileContent, { disabled: disabled, isLoading: isLoading, acceptImage: acceptImage, dropImageText: dropImageText, handleSelectFile: handleSelectFile, selectImageButtonText: selectImageButtonText })), filePath && (_jsx(HasFileContent, { disabled: disabled, isLoading: isLoading, acceptImage: acceptImage, filePath: filePath, handleSelectFile: handleSelectFile, changeImageButtonText: changeImageButtonText, reSendImage: !!errorMessage && file ? () => handleUploadImage(file) : undefined }))] }) }));
 }
 export { ImageUpload };

package/dist/components/input/index.d.ts

@@ -6,11 +6,13 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"
     label?: string;
     errorMessage?: string;
     isLoading?: boolean;
+    unShowFieldTemplate?: boolean;
     size?: "md" | "lg";
     variant?: "solid" | "outline" | "underline";
     prefix?: string | LucideIcon;
     suffix?: string | LucideIcon;
     showAsterisk?: boolean;
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
     leftIcon?: LucideIcon;
     rightIcon?: LucideIcon;
     value?: string;
@@ -31,6 +33,8 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"
  * @param props.showAsterisk - Whether to show asterisk on label for required fields
  * @param props.leftIcon - Optional icon to display on the left side
  * @param props.rightIcon - Optional icon to display on the right side
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * **...Other valid HTML properties for input element**
  *

package/dist/components/input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AASf,OAAO,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG,IAAI,CACpB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CACtD,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAuI/B;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG,IAAI,CACpB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CACtD,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAE9D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAyI/B;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}

package/dist/components/input/index.js

@@ -2,10 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
 import { useId, useRef, useState, } from "react";
 import { useForm } from "../../hooks/useForm";
+import { FieldTemplate } from "../../services/fieldTemplate";
 import { IconRenderer } from "../../services/iconRenderer";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
 import "./style.css";
 /**
  * Input component - used for text input fields with support for labels, validation, icons, and loading states
@@ -22,6 +20,8 @@ import "./style.css";
  * @param props.showAsterisk - Whether to show asterisk on label for required fields
  * @param props.leftIcon - Optional icon to display on the left side
  * @param props.rightIcon - Optional icon to display on the right side
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * **...Other valid HTML properties for input element**
  *
@@ -70,7 +70,7 @@ import "./style.css";
  * ```
  */
 function Input(props) {
-    const { name, disabled, title, style, variant = "solid", label, className: wrapperClassName = "", prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, showAsterisk, rightIcon, type = "text", size = "md", id, value, placeholder, ...rest } = props;
+    const { name, disabled, title, style, variant = "solid", label, className: wrapperClassName = "", prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, unShowFieldTemplate = false, errorMessage: baseErrorMessage, showAsterisk, rightIcon, type = "text", size = "md", id, value, placeholder, orientation, ...rest } = props;
     const { fieldErrors } = useForm();
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
@@ -109,6 +109,6 @@ function Input(props) {
     const focused = isFocused ? "focused" : "";
     const disabledClass = disabled ? "disabled" : "";
     const className = `arkynInput ${hasPrefix} ${disabledClass} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, type: type, id: inputId, name: name, placeholder: isDisabled ? value || placeholder : placeholder, value: isDisabled ? undefined : value, ...rest }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, type: type, id: inputId, name: name, placeholder: isDisabled ? value || placeholder : placeholder, value: isDisabled ? undefined : value, ...rest }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }) }));
 }
 export { Input };

package/dist/components/multiSelect/index.d.ts

@@ -29,6 +29,8 @@ type MultiSelectProps = {
     prefix?: string | LucideIcon;
     leftIcon?: LucideIcon;
     optionMaxHeight?: number;
+    unShowFieldTemplate?: boolean;
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
  * MultiSelect component - used for selecting multiple options from a dropdown list with support for search, labels, and validation
@@ -59,6 +61,8 @@ type MultiSelectProps = {
  * @param props.prefix - Text or icon to display at the beginning of the multiselect
  * @param props.leftIcon - Optional icon to display on the left side
  * @param props.optionMaxHeight - Maximum height for the options dropdown
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * @returns MultiSelect JSX element wrapped in FieldWrapper with optional label and error
  *

package/dist/components/multiSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAiB5D,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAE5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAErC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAEjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,QAAQ,CAAC,EAAE,UAAU,CAAC;IAEtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAwK3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/multiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAe5D,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAE5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAErC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAEjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,QAAQ,CAAC,EAAE,UAAU,CAAC;IAEtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8K3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/multiSelect/index.js

@@ -2,9 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 import { useForm } from "../../hooks/useForm";
 import { IconRenderer } from "../../services/iconRenderer";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
+import { FieldTemplate } from "@components/services/fieldTemplate";
 import { MultiSelectChevron } from "./multiSelectChevron";
 import { MultiSelectContainer } from "./multiSelectContainer";
 import { MultiSelectContent } from "./multiSelectContent";
@@ -42,6 +40,8 @@ import { MultiSelectSpinner } from "./multiSelectSpinner";
  * @param props.prefix - Text or icon to display at the beginning of the multiselect
  * @param props.leftIcon - Optional icon to display on the left side
  * @param props.optionMaxHeight - Maximum height for the options dropdown
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * @returns MultiSelect JSX element wrapped in FieldWrapper with optional label and error
  *
@@ -104,7 +104,7 @@ import { MultiSelectSpinner } from "./multiSelectSpinner";
  * ```
  */
 function MultiSelect(props) {
-    const { name, options, className: wrapperClassName = "", placeholder = "Selecione...", closeOnSelect = false, defaultValue = [], errorMessage: baseErrorMessage, isLoading = false, readOnly = false, isSearchable = false, id, label, optionMaxHeight, showAsterisk, leftIcon: LeftIcon, onSearch, onChange, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled: baseDisabled = false, prefix, size = "md", value, variant = "solid", } = props;
+    const { name, options, className: wrapperClassName = "", placeholder = "Selecione...", closeOnSelect = false, defaultValue = [], errorMessage: baseErrorMessage, isLoading = false, readOnly = false, isSearchable = false, id, label, optionMaxHeight, showAsterisk, leftIcon: LeftIcon, onSearch, onChange, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled: baseDisabled = false, prefix, size = "md", value, variant = "solid", unShowFieldTemplate = false, orientation = "horizontal", } = props;
     const { fieldErrors } = useForm();
     const multiSelectRef = useRef(null);
     const multiSelectId = id || useId();
@@ -164,6 +164,6 @@ function MultiSelect(props) {
             return true;
         return false;
     });
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(MultiSelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, prefixExists: !!prefix, id: multiSelectId, children: [_jsx("input", { ref: multiSelectRef, name: name, value: JSON.stringify(forceSelectedOptions), type: "hidden" }), _jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsxs(MultiSelectContent, { size: size, children: [forceSelectedOptions.map((value) => (_jsx(MultiSelectMark, { label: getOptionLabel(value), value: value, handleChangeValue: handleChangeValue, disabled: disabled }, value))), forceSelectedOptions.length <= 0 && _jsx("p", { children: placeholder })] }), _jsxs(MultiSelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, search: search, onSearch: handleSearch, children: [mappedOptions.map(({ label, value }) => (_jsx(MultiSelectOption, { label: label, value: value, size: size, handleChangeValue: handleChangeValue, optionHasSelected: optionHasSelected }, value))), mappedOptions.length <= 0 && _jsx("p", { children: notFoundText })] }), _jsx(MultiSelectChevron, { disabled: disabled, isFocused: isFocused, readOnly: readOnly, iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectSpinner, { iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectOverlay, { handleBlur: handleBlur, isFocused: isFocused })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs(MultiSelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, prefixExists: !!prefix, id: multiSelectId, children: [_jsx("input", { ref: multiSelectRef, name: name, value: JSON.stringify(forceSelectedOptions), type: "hidden" }), _jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsxs(MultiSelectContent, { size: size, children: [forceSelectedOptions.map((value) => (_jsx(MultiSelectMark, { label: getOptionLabel(value), value: value, handleChangeValue: handleChangeValue, disabled: disabled }, value))), forceSelectedOptions.length <= 0 && _jsx("p", { children: placeholder })] }), _jsxs(MultiSelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, search: search, onSearch: handleSearch, children: [mappedOptions.map(({ label, value }) => (_jsx(MultiSelectOption, { label: label, value: value, size: size, handleChangeValue: handleChangeValue, optionHasSelected: optionHasSelected }, value))), mappedOptions.length <= 0 && _jsx("p", { children: notFoundText })] }), _jsx(MultiSelectChevron, { disabled: disabled, isFocused: isFocused, readOnly: readOnly, iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectSpinner, { iconSize: iconSize, isLoading: isLoading }), _jsx(MultiSelectOverlay, { handleBlur: handleBlur, isFocused: isFocused })] }) }));
 }
 export { MultiSelect };

package/dist/components/phoneInput/index.d.ts

@@ -17,7 +17,55 @@ type PhoneInputProps = {
     defaultCountryIso?: (typeof countries)[number]["iso"];
     onChange?: (e: string) => void;
     value?: string;
+    unShowFieldTemplate?: boolean;
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
+/**
+ * Phone input with country selector, mask formatting, and hidden form value.
+ *
+ * The component formats the visible value according to the selected country mask,
+ * while the hidden input stores a numeric string prefixed with the country code.
+ * It also integrates with `useForm` to display validation errors by field name.
+ *
+ * @param {PhoneInputProps} props Component properties.
+ * @param {string} props.name Hidden input name used in form submission.
+ * @param {string} [props.label] Optional field label.
+ * @param {boolean} [props.showAsterisk] Displays required marker in the label.
+ * @param {string} [props.errorMessage] Custom error message (overrides form context error).
+ * @param {"md" | "lg"} [props.size="md"] Visual size.
+ * @param {"solid" | "outline"} [props.variant="solid"] Visual variant.
+ * @param {boolean} [props.disabled=false] Disables interactions.
+ * @param {boolean} [props.readOnly=false] Prevents editing while keeping value visible.
+ * @param {boolean} [props.isLoading=false] Applies loading state and disables interactions.
+ * @param {string} [props.defaultValue=""] Initial phone value for uncontrolled usage.
+ * @param {string} [props.value] Controlled phone value.
+ * @param {(value: string) => void} [props.onChange] Callback with numeric value including country code.
+ * @param {(typeof countries)[number]["iso"]} [props.defaultCountryIso] Reserved prop for default country ISO.
+ * @param {string} [props.searchCountryPlaceholder="Pesquisar país"] Placeholder for country search input.
+ * @param {string} [props.notFoundCountryText="Nenhum país encontrado"] Text shown when no country matches search.
+ * @param {string} [props.className] Class applied to the field wrapper.
+ * @param {string} [props.id] Optional id for the visible phone input.
+ * @param {boolean} [props.unShowFieldTemplate=false] When `true`, skips wrapper/label/error rendering from `FieldTemplate`.
+ * @param {"horizontal" | "vertical" | "horizontalReverse"} [props.orientation="horizontal"] Layout direction forwarded to `FieldTemplate`/`FieldWrapper`.
+ *
+ * @returns {JSX.Element} Phone input field with country picker and hidden input for form submission.
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput name="phone" label="Telefone" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput
+ *   name="contactPhone"
+ *   value={phone}
+ *   onChange={setPhone}
+ *   variant="outline"
+ *   size="lg"
+ * />
+ * ```
+ */
 declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
 export { PhoneInput };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA6B7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAqKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAqB7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAuKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/phoneInput/index.js

@@ -1,19 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { findCountryMask, formatToPhone, removeNonNumeric, } from "@arkyn/shared";
 import { countries } from "@arkyn/templates";
 import { useId, useRef, useState } from "react";
-import { findCountryMask, formatToPhone, removeNonNumeric, } from "@arkyn/shared";
 import { useForm } from "../../hooks/useForm";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
+import { FieldTemplate } from "../../services/fieldTemplate";
 import { PhoneInputContainer } from "./phoneInputContainer";
 import { PhoneInputCountriesOverlay } from "./phoneInputCountriesOverlay";
 import { PhoneInputCountryOption } from "./phoneInputCountryOption";
 import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsContainer";
 import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
 import { PhoneInputMask } from "./phoneInputMask";
+/**
+ * Phone input with country selector, mask formatting, and hidden form value.
+ *
+ * The component formats the visible value according to the selected country mask,
+ * while the hidden input stores a numeric string prefixed with the country code.
+ * It also integrates with `useForm` to display validation errors by field name.
+ *
+ * @param {PhoneInputProps} props Component properties.
+ * @param {string} props.name Hidden input name used in form submission.
+ * @param {string} [props.label] Optional field label.
+ * @param {boolean} [props.showAsterisk] Displays required marker in the label.
+ * @param {string} [props.errorMessage] Custom error message (overrides form context error).
+ * @param {"md" | "lg"} [props.size="md"] Visual size.
+ * @param {"solid" | "outline"} [props.variant="solid"] Visual variant.
+ * @param {boolean} [props.disabled=false] Disables interactions.
+ * @param {boolean} [props.readOnly=false] Prevents editing while keeping value visible.
+ * @param {boolean} [props.isLoading=false] Applies loading state and disables interactions.
+ * @param {string} [props.defaultValue=""] Initial phone value for uncontrolled usage.
+ * @param {string} [props.value] Controlled phone value.
+ * @param {(value: string) => void} [props.onChange] Callback with numeric value including country code.
+ * @param {(typeof countries)[number]["iso"]} [props.defaultCountryIso] Reserved prop for default country ISO.
+ * @param {string} [props.searchCountryPlaceholder="Pesquisar país"] Placeholder for country search input.
+ * @param {string} [props.notFoundCountryText="Nenhum país encontrado"] Text shown when no country matches search.
+ * @param {string} [props.className] Class applied to the field wrapper.
+ * @param {string} [props.id] Optional id for the visible phone input.
+ * @param {boolean} [props.unShowFieldTemplate=false] When `true`, skips wrapper/label/error rendering from `FieldTemplate`.
+ * @param {"horizontal" | "vertical" | "horizontalReverse"} [props.orientation="horizontal"] Layout direction forwarded to `FieldTemplate`/`FieldWrapper`.
+ *
+ * @returns {JSX.Element} Phone input field with country picker and hidden input for form submission.
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput name="phone" label="Telefone" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput
+ *   name="contactPhone"
+ *   value={phone}
+ *   onChange={setPhone}
+ *   variant="outline"
+ *   size="lg"
+ * />
+ * ```
+ */
 function PhoneInput(props) {
-    const { defaultCountryIso, value: rawValue, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, } = props;
+    const { defaultCountryIso, value: rawValue, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, unShowFieldTemplate = false, orientation = "horizontal", } = props;
     const brasilCountry = countries.find((country) => country.iso === "BR");
     const defaultData = defaultValue ? formatToPhone(defaultValue) : "";
     const defaultCountry = defaultValue
@@ -63,16 +107,16 @@ function PhoneInput(props) {
         returnValue += removeNonNumeric(props || value);
         return returnValue;
     }
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { htmlFor: phoneInputId, showAsterisk: showAsterisk, children: label })), _jsxs(PhoneInputContainer, { disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
-                                .filter((country) => filterCountryFunction(country))
-                                .map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
-                                    setCurrentCountry(country);
-                                    setShowCountryOptions(false);
-                                    setValue("");
-                                }, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
-                                .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { id: phoneInputId, ref: inputPhoneMaskRef, readonly: readOnly, currentCountry: currentCountry, value: value, disabled: isDisabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size, onChange: (e) => {
-                            setValue(e);
-                            onChange && onChange(inputValue(e));
-                        } }), _jsx("input", { ref: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs(PhoneInputContainer, { disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
+                            .filter((country) => filterCountryFunction(country))
+                            .map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
+                                setCurrentCountry(country);
+                                setShowCountryOptions(false);
+                                setValue("");
+                            }, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
+                            .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { id: phoneInputId, ref: inputPhoneMaskRef, readonly: readOnly, currentCountry: currentCountry, value: value, disabled: isDisabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size, onChange: (e) => {
+                        setValue(e);
+                        onChange && onChange(inputValue(e));
+                    } }), _jsx("input", { ref: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }) }));
 }
 export { PhoneInput };

package/dist/components/radio/radioGroup/index.d.ts

@@ -10,6 +10,8 @@ type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     onChange?: (value: string) => void;
     size?: "sm" | "md" | "lg";
     disabled?: boolean;
+    unShowFieldTemplate?: boolean;
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
  * RadioGroup component - used for creating a group of radio button options with shared state management
@@ -23,6 +25,8 @@ type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
  * @param props.defaultValue - Default selected value for uncontrolled usage. Default: ""
  * @param props.onChange - Callback function called when radio selection changes, receives the selected value
  * @param props.size - Size variant for all radio buttons in the group. Default: "md"
+ * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
+ * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
  *
  * **...Other valid HTML properties for div element (except onChange)**
  *

package/dist/components/radio/radioGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAQjD,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAkDzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAMjD,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA0DzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}