@arkyn/components 3.0.1-beta.11 → 3.0.1-beta.13

package/dist/src/components/currencyInput/index.js

@@ -0,0 +1,140 @@
+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 { IconRenderer } from "../../services/iconRenderer";
+import { maskCurrencyValues } 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
+ *
+ * @param props - CurrencyInput component properties
+ * @param props.name - Required field name for form handling
+ * @param props.locale - Currency locale for formatting (e.g., "USD", "EUR", "BRL", etc.)
+ * @param props.label - Optional label text to display above the input
+ * @param props.errorMessage - Error message to display below the input
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.size - Input size. Default: "md"
+ * @param props.variant - Visual variant of the input. Default: "solid"
+ * @param props.prefix - Text or icon to display at the beginning of the input
+ * @param props.suffix - Text or icon to display at the end of the input
+ * @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.max - Maximum allowed value for the currency input
+ * @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
+ *
+ * **...Other valid HTML properties for input element (except type, max, defaultValue, value, onChange)**
+ *
+ * @returns CurrencyInput JSX element wrapped in FieldGroup with optional label and error
+ *
+ * @example
+ * ```tsx
+ * // Basic currency input
+ * <CurrencyInput name="price" locale="USD" placeholder="Enter price" />
+ *
+ * // Currency input with label and validation
+ * <CurrencyInput
+ *   name="salary"
+ *   locale="BRL"
+ *   label="Monthly Salary"
+ *   showAsterisk
+ *   errorMessage="Please enter a valid amount"
+ * />
+ *
+ * // Currency input with icons and loading state
+ * <CurrencyInput
+ *   name="budget"
+ *   locale="EUR"
+ *   label="Budget"
+ *   leftIcon={DollarSignIcon}
+ *   rightIcon={CalculatorIcon}
+ *   isLoading
+ * />
+ *
+ * // Currency input with max value and controlled state
+ * <CurrencyInput
+ *   name="limit"
+ *   locale="USD"
+ *   label="Credit Limit"
+ *   max={10000}
+ *   value={creditLimit}
+ *   onChange={(e, original, masked) => setCreditLimit(Number(original))}
+ *   variant="outline"
+ * />
+ *
+ * // Large currency input with prefix/suffix
+ * <CurrencyInput
+ *   name="investment"
+ *   locale="GBP"
+ *   label="Investment Amount"
+ *   size="lg"
+ *   variant="underline"
+ *   prefix="£"
+ *   suffix="GBP"
+ *   placeholder="Enter investment amount"
+ * />
+ * ```
+ */
+function CurrencyInput(props) {
+    const { name, disabled, title, style, variant = "solid", label, className: baseClassName = "", value, defaultValue, max, locale, onChange, prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, showAsterisk, rightIcon, size = "md", id, ...rest } = props;
+    const { fieldErrors } = useForm();
+    const [isFocused, setIsFocused] = useState(false);
+    const [maskedValue, setMaskedValue] = useState("0");
+    const inputRef = useRef(null);
+    const inputId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const iconSizes = { md: 20, lg: 20 };
+    const iconSize = iconSizes[size];
+    const loadingPosition = rightIcon ? "right" : "left";
+    const showLeftSpinner = loadingPosition === "left" && isLoading;
+    const showRightSpinner = loadingPosition === "right" && isLoading;
+    function handleSectionClick() {
+        if (disabled || !inputRef?.current)
+            return;
+        setIsFocused(true);
+        inputRef.current.focus();
+    }
+    function handleFocus(e) {
+        setIsFocused(true);
+        if (onFocus)
+            onFocus(e);
+    }
+    function handleBlur(e) {
+        setIsFocused(false);
+        if (onBlur)
+            onBlur(e);
+    }
+    const updateValues = (originalValue) => {
+        const [calculatedValue, calculatedMaskedValue] = maskCurrencyValues(originalValue, locale);
+        if (!max || calculatedValue <= max) {
+            setMaskedValue(calculatedMaskedValue);
+            return [calculatedValue, calculatedMaskedValue];
+        }
+        return maskCurrencyValues(originalValue, locale);
+    };
+    const handleChange = (event) => {
+        event.preventDefault();
+        const [originalValue, maskedValue] = updateValues(event.target.value);
+        onChange && onChange(event, String(originalValue), String(maskedValue));
+    };
+    useEffect(() => {
+        const currentValue = value || +defaultValue || undefined;
+        const [, maskedValue] = maskCurrencyValues(currentValue, locale);
+        setMaskedValue(maskedValue);
+    }, [locale, defaultValue, value]);
+    const hasPrefix = !!prefix ? "hasPrefix" : "";
+    const hasSuffix = !!suffix ? "hasSuffix" : "";
+    const errored = isError ? "errored" : "";
+    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
+    const focused = isFocused ? "focused" : "";
+    const className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
+    return (_jsxs(FieldWrapper, { 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", { value: maskedValue, disabled: disabled || isLoading, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, id: inputId, ...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 })] }));
+}
+export { CurrencyInput };

package/dist/src/components/divider/index.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type DividerProps = HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+};
+/**
+ * Divider component - used to visually separate content sections
+ *
+ * @param props - Divider component properties
+ * @param props.orientation - Divider orientation. Default: "horizontal"
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns Divider JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal divider
+ * <Divider />
+ *
+ * // Explicit horizontal divider
+ * <Divider orientation="horizontal" />
+ *
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * // Custom styled divider
+ * <Divider
+ *   orientation="horizontal"
+ *   className="my-custom-divider"
+ * />
+ *
+ * // Usage in layout
+ * <div>
+ *   <h2>Section 1</h2>
+ *   <p>Content for section 1</p>
+ *   <Divider />
+ *   <h2>Section 2</h2>
+ *   <p>Content for section 2</p>
+ * </div>
+ * ```
+ */
+declare function Divider(props: DividerProps): import("react/jsx-runtime").JSX.Element;
+export { Divider };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACnD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAUnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/src/components/divider/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * Divider component - used to visually separate content sections
+ *
+ * @param props - Divider component properties
+ * @param props.orientation - Divider orientation. Default: "horizontal"
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns Divider JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal divider
+ * <Divider />
+ *
+ * // Explicit horizontal divider
+ * <Divider orientation="horizontal" />
+ *
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * // Custom styled divider
+ * <Divider
+ *   orientation="horizontal"
+ *   className="my-custom-divider"
+ * />
+ *
+ * // Usage in layout
+ * <div>
+ *   <h2>Section 1</h2>
+ *   <p>Content for section 1</p>
+ *   <Divider />
+ *   <h2>Section 2</h2>
+ *   <p>Content for section 2</p>
+ * </div>
+ * ```
+ */
+function Divider(props) {
+    const { className: baseClassName, orientation = "horizontal", ...rest } = props;
+    const className = `arkynDivider ${orientation} ${baseClassName}`;
+    return _jsx("div", { className: className.trim(), ...rest });
+}
+export { Divider };

package/dist/src/components/drawer/drawerContainer/index.d.ts

@@ -0,0 +1,71 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type DrawerContainerProps = HTMLAttributes<HTMLElement> & {
+    isVisible: boolean;
+    makeInvisible: () => void;
+    orientation?: "left" | "right";
+};
+/**O
+ * DrawerContainer component - animated slide-out panel for navigation or content
+ *
+ * @param props - DrawerContainer component properties
+ * @param props.isVisible - Controls drawer visibility state
+ * @param props.makeInvisible - Callback function to hide the drawer
+ * @param props.orientation - Side from which drawer slides (left, right). Default: "left"
+ *
+ * **...Other valid HTML properties for aside element**
+ *
+ * @returns DrawerContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic drawer from left
+ * const [isOpen, setIsOpen] = useState(false);
+ * <DrawerContainer
+ *   isVisible={isOpen}
+ *   makeInvisible={setIsOpen}
+ * >
+ *   <p>Drawer content</p>
+ * </DrawerContainer>
+ *
+ * // Right-side drawer
+ * <DrawerContainer
+ *   isVisible={isOpen}
+ *   makeInvisible={setIsOpen}
+ *   orientation="right"
+ * >
+ *   <nav>Navigation items</nav>
+ * </DrawerContainer>
+ *
+ * // Complete drawer example
+ * function DrawerExample() {
+ *   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsDrawerOpen(true)}>
+ *         Open Menu
+ *       </button>
+ *
+ *       <DrawerContainer
+ *         isVisible={isDrawerOpen}
+ *         makeInvisible={setIsDrawerOpen}
+ *         orientation="right"
+ *       >
+ *         <div className="drawer-content">
+ *           <h2>Menu</h2>
+ *           <ul>
+ *             <li>Home</li>
+ *             <li>About</li>
+ *             <li>Contact</li>
+ *           </ul>
+ *         </div>
+ *       </DrawerContainer>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function DrawerContainer(props: DrawerContainerProps): import("react/jsx-runtime").JSX.Element;
+export { DrawerContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/drawer/drawerContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/drawerContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,cAAc,CAAC;AAEtB,KAAK,oBAAoB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA6CnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/src/components/drawer/drawerContainer/index.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import { useScrollLock } from "../../../hooks/useScrollLock";
+import { DrawerProvider } from "../drawerContext";
+import "./styles.css";
+/**O
+ * DrawerContainer component - animated slide-out panel for navigation or content
+ *
+ * @param props - DrawerContainer component properties
+ * @param props.isVisible - Controls drawer visibility state
+ * @param props.makeInvisible - Callback function to hide the drawer
+ * @param props.orientation - Side from which drawer slides (left, right). Default: "left"
+ *
+ * **...Other valid HTML properties for aside element**
+ *
+ * @returns DrawerContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic drawer from left
+ * const [isOpen, setIsOpen] = useState(false);
+ * <DrawerContainer
+ *   isVisible={isOpen}
+ *   makeInvisible={setIsOpen}
+ * >
+ *   <p>Drawer content</p>
+ * </DrawerContainer>
+ *
+ * // Right-side drawer
+ * <DrawerContainer
+ *   isVisible={isOpen}
+ *   makeInvisible={setIsOpen}
+ *   orientation="right"
+ * >
+ *   <nav>Navigation items</nav>
+ * </DrawerContainer>
+ *
+ * // Complete drawer example
+ * function DrawerExample() {
+ *   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsDrawerOpen(true)}>
+ *         Open Menu
+ *       </button>
+ *
+ *       <DrawerContainer
+ *         isVisible={isDrawerOpen}
+ *         makeInvisible={setIsDrawerOpen}
+ *         orientation="right"
+ *       >
+ *         <div className="drawer-content">
+ *           <h2>Menu</h2>
+ *           <ul>
+ *             <li>Home</li>
+ *             <li>About</li>
+ *             <li>Contact</li>
+ *           </ul>
+ *         </div>
+ *       </DrawerContainer>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+function DrawerContainer(props) {
+    const { isVisible, makeInvisible, orientation = "left", children, className: baseClassName, ...rest } = props;
+    useScrollLock(isVisible);
+    const translateX = orientation === "left" ? "-100%" : "100%";
+    const visibleClass = isVisible ? "visibleTrue" : "visibleFalse";
+    const className = `arkynDrawerContainer ${orientation} ${visibleClass} ${baseClassName}`;
+    return (_jsx(DrawerProvider, { makeInvisible: makeInvisible, children: _jsx(AnimatePresence, { children: isVisible && (_jsxs("aside", { className: className.trim(), ...rest, children: [_jsx(motion.div, { className: "arkynDrawerContainerOverlay", transition: { duration: 0.15, ease: "easeOut" }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: makeInvisible }), _jsx(motion.div, { className: "arkynDrawerContainerContent", transition: { ease: "easeOut", duration: 0.15 }, initial: { transform: `translateX(${translateX})` }, animate: { transform: "translateX(0px)" }, exit: { transform: `translateX(${translateX})` }, children: children })] })) }) }));
+}
+export { DrawerContainer };

package/dist/src/components/drawer/drawerContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+type DrawerContextProps = {
+    makeInvisible: () => void;
+};
+type DrawerProviderProps = {
+    children: ReactNode;
+    makeInvisible: () => void;
+};
+declare function DrawerProvider(props: DrawerProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useDrawer(): DrawerContextProps;
+export { DrawerProvider, useDrawer };
+//# sourceMappingURL=drawerContext.d.ts.map

package/dist/src/components/drawer/drawerContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawerContext.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,kBAAkB,GAAG;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAIF,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAMjD;AAED,iBAAS,SAAS,uBAEjB;AAED,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/components/drawer/drawerContext.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const drawerContext = createContext({});
+function DrawerProvider(props) {
+    return (_jsx(drawerContext.Provider, { value: { makeInvisible: props.makeInvisible }, children: props.children }));
+}
+function useDrawer() {
+    return useContext(drawerContext);
+}
+export { DrawerProvider, useDrawer };

package/dist/src/components/drawer/drawerHeader/index.d.ts

@@ -0,0 +1,55 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type DrawerHeaderProps = HTMLAttributes<HTMLElement> & {
+    showCloseButton?: boolean;
+};
+/**
+ * DrawerHeader component - header section for drawer with optional close button
+ *
+ * @param props - DrawerHeader component properties
+ * @param props.showCloseButton - Shows close button in header. Default: true
+ *
+ * **...Other valid HTML properties for header element**
+ *
+ * @returns DrawerHeader JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic drawer header with close button
+ * <DrawerHeader>
+ *   <h2>Menu</h2>
+ * </DrawerHeader>
+ *
+ * // Header without close button
+ * <DrawerHeader showCloseButton={false}>
+ *   <h2>Settings</h2>
+ * </DrawerHeader>
+ *
+ * // Complete drawer example
+ * <DrawerContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
+ *   <DrawerHeader>
+ *     <h2>Navigation</h2>
+ *     <p>Welcome to our app</p>
+ *   </DrawerHeader>
+ *
+ *   <div className="drawer-content">
+ *     <nav>
+ *       <a href="/home">Home</a>
+ *       <a href="/about">About</a>
+ *       <a href="/contact">Contact</a>
+ *     </nav>
+ *   </div>
+ * </DrawerContainer>
+ *
+ * // Custom styled header
+ * <DrawerHeader className="custom-header">
+ *   <div className="header-content">
+ *     <img src="/logo.png" alt="Logo" />
+ *     <h1>My App</h1>
+ *   </div>
+ * </DrawerHeader>
+ * ```
+ */
+declare function DrawerHeader(props: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { DrawerHeader };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/drawer/drawerHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer/drawerHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA2B7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/src/components/drawer/drawerHeader/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useDrawer } from "../drawerContext";
+import "./styles.css";
+/**
+ * DrawerHeader component - header section for drawer with optional close button
+ *
+ * @param props - DrawerHeader component properties
+ * @param props.showCloseButton - Shows close button in header. Default: true
+ *
+ * **...Other valid HTML properties for header element**
+ *
+ * @returns DrawerHeader JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic drawer header with close button
+ * <DrawerHeader>
+ *   <h2>Menu</h2>
+ * </DrawerHeader>
+ *
+ * // Header without close button
+ * <DrawerHeader showCloseButton={false}>
+ *   <h2>Settings</h2>
+ * </DrawerHeader>
+ *
+ * // Complete drawer example
+ * <DrawerContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>
+ *   <DrawerHeader>
+ *     <h2>Navigation</h2>
+ *     <p>Welcome to our app</p>
+ *   </DrawerHeader>
+ *
+ *   <div className="drawer-content">
+ *     <nav>
+ *       <a href="/home">Home</a>
+ *       <a href="/about">About</a>
+ *       <a href="/contact">Contact</a>
+ *     </nav>
+ *   </div>
+ * </DrawerContainer>
+ *
+ * // Custom styled header
+ * <DrawerHeader className="custom-header">
+ *   <div className="header-content">
+ *     <img src="/logo.png" alt="Logo" />
+ *     <h1>My App</h1>
+ *   </div>
+ * </DrawerHeader>
+ * ```
+ */
+function DrawerHeader(props) {
+    const { showCloseButton = true, className: baseClassName, children, ...rest } = props;
+    const { makeInvisible } = useDrawer();
+    const className = `arkynDrawerHeader ${baseClassName}`;
+    return (_jsxs("header", { className: className.trim(), ...rest, children: [children, showCloseButton && (_jsx("button", { className: "arkynDrawerHeaderCloseButton", type: "button", onClick: makeInvisible, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) }))] }));
+}
+export { DrawerHeader };

package/dist/src/components/fieldError/index.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type FieldErrorProps = HTMLAttributes<HTMLElement>;
+/**
+ * FieldError component - used to display error messages for form fields
+ *
+ * @param props - FieldError component properties
+ *
+ * **...Other valid HTML properties for strong element**
+ *
+ * @returns FieldError JSX element or empty fragment if no children
+ *
+ * @example
+ * ```tsx
+ * // Basic field error
+ * <FieldError>This field is required</FieldError>
+ *
+ * // Field error with custom styling
+ * <FieldError className="custom-error">
+ *  Invalid email format
+ * </FieldError>
+ *
+ * // Conditional field error
+ * {error && <FieldError>{error}</FieldError>}
+ * ```
+ */
+declare function FieldError(props: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
+export { FieldError };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/fieldError/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/fieldError/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAWzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/src/components/fieldError/index.js

@@ -0,0 +1,33 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * FieldError component - used to display error messages for form fields
+ *
+ * @param props - FieldError component properties
+ *
+ * **...Other valid HTML properties for strong element**
+ *
+ * @returns FieldError JSX element or empty fragment if no children
+ *
+ * @example
+ * ```tsx
+ * // Basic field error
+ * <FieldError>This field is required</FieldError>
+ *
+ * // Field error with custom styling
+ * <FieldError className="custom-error">
+ *  Invalid email format
+ * </FieldError>
+ *
+ * // Conditional field error
+ * {error && <FieldError>{error}</FieldError>}
+ * ```
+ */
+function FieldError(props) {
+    const { children, className: baseClassName, ...rest } = props;
+    const className = `arkynFieldError ${baseClassName}`;
+    if (!children)
+        return _jsx(_Fragment, {});
+    return (_jsx("strong", { className: className.trim(), ...rest, children: children }));
+}
+export { FieldError };

package/dist/src/components/fieldLabel/index.d.ts

@@ -0,0 +1,38 @@
+import { LabelHTMLAttributes } from "react";
+import "./styles.css";
+type FieldLabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+    showAsterisk?: boolean;
+};
+/**
+ * FieldLabel component - used to display labels for form fields with optional required indicator
+ *
+ * @param props - FieldLabel component properties
+ * @param props.showAsterisk - Whether to display an asterisk (*) to indicate required field. Default: false
+ *
+ * **...Other valid HTML properties for label element**
+ *
+ * @returns FieldLabel JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic field label
+ * <FieldLabel htmlFor="username">Username</FieldLabel>
+ *
+ * // Required field label with asterisk
+ * <FieldLabel htmlFor="email" showAsterisk>
+ *   Email Address
+ * </FieldLabel>
+ *
+ * // Label with custom styling
+ * <FieldLabel
+ *   htmlFor="password"
+ *   className="custom-label"
+ *   showAsterisk
+ * >
+ *   Password
+ * </FieldLabel>
+ * ```
+ */
+declare function FieldLabel(props: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
+export { FieldLabel };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/fieldLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/fieldLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAWzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}