@arkyn/components 3.0.1-beta.17 → 3.0.1-beta.170

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

@@ -1,58 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,33 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * 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>
- * ```
- */
-function FieldLabel(props) {
-    const { showAsterisk = false, className: baseClassName = "", ...rest } = props;
-    const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
-    const className = `arkynFieldLabel ${show} ${baseClassName}`;
-    return _jsx("label", { className: className.trim(), ...rest });
-}
-export { FieldLabel };

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

@@ -1,41 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-import "./styles.css";
-type FieldWrapperProps = HTMLAttributes<HTMLElement> & {
-    children: ReactNode;
-};
-/**
- * FieldWrapper component - used as a container wrapper for a single form field and its related elements
- *
- * @param props - FieldWrapper component properties
- * @param props.children - React elements that compose a single field (label, input, error message, etc.)
- *
- * **...Other valid HTML properties for section element**
- *
- * @returns FieldWrapper JSX element
- *
- * @example
- * ```tsx
- * // Basic field container
- * <FieldWrapper>
- *   <FieldLabel>Username</FieldLabel>
- *   <Input name="username" />
- *   <FieldError>This field is required</FieldError>
- * </FieldWrapper>
- *
- * // Field container with custom styling
- * <FieldWrapper className="custom-spacing">
- *   <FieldLabel>Email</FieldLabel>
- *   <Input name="email" type="email" />
- * </FieldWrapper>
- *
- * // Complete field with all elements
- * <FieldWrapper>
- *   <FieldLabel showAsterisk>Password</FieldLabel>
- *   <Input name="password" type="password" />
- *   <FieldError>Password must be at least 8 characters</FieldError>
- * </FieldWrapper>
- * ```
- */
-declare function FieldWrapper(props: FieldWrapperProps): import("react/jsx-runtime").JSX.Element;
-export { FieldWrapper };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/fieldWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACrD,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAU7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -1,41 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * FieldWrapper component - used as a container wrapper for a single form field and its related elements
- *
- * @param props - FieldWrapper component properties
- * @param props.children - React elements that compose a single field (label, input, error message, etc.)
- *
- * **...Other valid HTML properties for section element**
- *
- * @returns FieldWrapper JSX element
- *
- * @example
- * ```tsx
- * // Basic field container
- * <FieldWrapper>
- *   <FieldLabel>Username</FieldLabel>
- *   <Input name="username" />
- *   <FieldError>This field is required</FieldError>
- * </FieldWrapper>
- *
- * // Field container with custom styling
- * <FieldWrapper className="custom-spacing">
- *   <FieldLabel>Email</FieldLabel>
- *   <Input name="email" type="email" />
- * </FieldWrapper>
- *
- * // Complete field with all elements
- * <FieldWrapper>
- *   <FieldLabel showAsterisk>Password</FieldLabel>
- *   <Input name="password" type="password" />
- *   <FieldError>Password must be at least 8 characters</FieldError>
- * </FieldWrapper>
- * ```
- */
-function FieldWrapper(props) {
-    const { children, className: baseClassName, ...rest } = props;
-    const className = `arkynFieldWrapper ${baseClassName}`;
-    return (_jsx("section", { className: className.trim(), ...rest, children: children }));
-}
-export { FieldWrapper };

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

@@ -1,44 +0,0 @@
-import { LucideIcon } from "lucide-react";
-import { ButtonHTMLAttributes } from "react";
-import "./styles.css";
-type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-label"> & {
-    icon: LucideIcon;
-    "aria-label": string;
-    isLoading?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-    variant?: "solid" | "outline" | "ghost" | "invisible";
-    scheme?: "primary" | "success" | "warning" | "danger" | "info";
-};
-/**
- * IconButton component - compact button that renders only an icon
- *
- * @param props - IconButton component properties
- * @param props.icon - Icon to render inside the button (LucideIcon). Required
- * @param props.aria-label - Accessible label for screen readers. Required
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Button size. Default: "md"
- * @param props.variant - Visual variant of the button. Default: "solid"
- * @param props.scheme - Button color scheme. Default: "primary"
- *
- * **...Other valid HTML properties for button element (children not supported)**
- *
- * @returns IconButton JSX element
- *
- * @example
- * ```tsx
- * // Basic icon button
- * <IconButton icon={Plus} aria-label="Add" />
- *
- * // Different color scheme and variant
- * <IconButton icon={Trash2} aria-label="Delete" scheme="danger" variant="outline" />
- *
- * // Loading state
- * <IconButton icon={Save} aria-label="Saving" isLoading />
- *
- * // Sizes
- * <IconButton icon={MoreVertical} aria-label="More options" size="sm" />
- * ```
- */
-declare function IconButton(props: IconButtonProps): import("react/jsx-runtime").JSX.Element;
-export { IconButton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/iconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CACzB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,YAAY,CAC1B,GAAG;IACF,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IACtD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;CAChE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA+BzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import "./styles.css";
-/**
- * IconButton component - compact button that renders only an icon
- *
- * @param props - IconButton component properties
- * @param props.icon - Icon to render inside the button (LucideIcon). Required
- * @param props.aria-label - Accessible label for screen readers. Required
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Button size. Default: "md"
- * @param props.variant - Visual variant of the button. Default: "solid"
- * @param props.scheme - Button color scheme. Default: "primary"
- *
- * **...Other valid HTML properties for button element (children not supported)**
- *
- * @returns IconButton JSX element
- *
- * @example
- * ```tsx
- * // Basic icon button
- * <IconButton icon={Plus} aria-label="Add" />
- *
- * // Different color scheme and variant
- * <IconButton icon={Trash2} aria-label="Delete" scheme="danger" variant="outline" />
- *
- * // Loading state
- * <IconButton icon={Save} aria-label="Saving" isLoading />
- *
- * // Sizes
- * <IconButton icon={MoreVertical} aria-label="More options" size="sm" />
- * ```
- */
-function IconButton(props) {
-    const { isLoading = false, scheme = "primary", variant = "solid", size = "md", icon: Icon, disabled, className: baseClassName = "", ...rest } = props;
-    const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
-    const loading = isLoading ? "loadingTrue" : "loadingFalse";
-    const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
-    return (_jsxs("button", { disabled: disabled || isLoading, className: className.trim(), ...rest, children: [_jsx("div", { className: "arkynIconButtonSpinner", children: _jsx(Loader2, { size: iconSize[size], strokeWidth: 2.5 }) }), _jsx("div", { className: "arkynIconButtonContent", children: _jsx(Icon, { size: iconSize[size], strokeWidth: 2.5 }) })] }));
-}
-export { IconButton };

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

@@ -1,81 +0,0 @@
-import { LucideIcon } from "lucide-react";
-import { InputHTMLAttributes } from "react";
-import "./style.css";
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "name"> & {
-    name: string;
-    label?: string;
-    errorMessage?: string;
-    isLoading?: boolean;
-    size?: "md" | "lg";
-    variant?: "solid" | "outline" | "underline";
-    prefix?: string | LucideIcon;
-    suffix?: string | LucideIcon;
-    showAsterisk?: boolean;
-    leftIcon?: LucideIcon;
-    rightIcon?: LucideIcon;
-};
-/**
- * Input component - used for text input fields with support for labels, validation, icons, and loading states
- *
- * @param props - Input component properties
- * @param props.name - Required field name for form handling
- * @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
- *
- * **...Other valid HTML properties for input element**
- *
- * @returns Input JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic input
- * <Input name="username" placeholder="Enter username" />
- *
- * // Input with label and validation
- * <Input
- *   name="email"
- *   label="Email Address"
- *   type="email"
- *   showAsterisk
- *   errorMessage="Please enter a valid email"
- * />
- *
- * // Input with icons and loading state
- * <Input
- *   name="search"
- *   label="Search"
- *   leftIcon={SearchIcon}
- *   rightIcon={FilterIcon}
- *   isLoading
- * />
- *
- * // Input with prefix/suffix
- * <Input
- *   name="website"
- *   label="Website"
- *   prefix="https://"
- *   suffix=".com"
- *   variant="outline"
- * />
- *
- * // Large input with underline variant
- * <Input
- *   name="title"
- *   label="Article Title"
- *   size="lg"
- *   variant="underline"
- *   placeholder="Enter article title"
- * />
- * ```
- */
-declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
-export { Input };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"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,CAC3B,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;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAgI/B;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -1,112 +0,0 @@
-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 { 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
- *
- * @param props - Input component properties
- * @param props.name - Required field name for form handling
- * @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
- *
- * **...Other valid HTML properties for input element**
- *
- * @returns Input JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic input
- * <Input name="username" placeholder="Enter username" />
- *
- * // Input with label and validation
- * <Input
- *   name="email"
- *   label="Email Address"
- *   type="email"
- *   showAsterisk
- *   errorMessage="Please enter a valid email"
- * />
- *
- * // Input with icons and loading state
- * <Input
- *   name="search"
- *   label="Search"
- *   leftIcon={SearchIcon}
- *   rightIcon={FilterIcon}
- *   isLoading
- * />
- *
- * // Input with prefix/suffix
- * <Input
- *   name="website"
- *   label="Website"
- *   prefix="https://"
- *   suffix=".com"
- *   variant="outline"
- * />
- *
- * // Large input with underline variant
- * <Input
- *   name="title"
- *   label="Article Title"
- *   size="lg"
- *   variant="underline"
- *   placeholder="Enter article title"
- * />
- * ```
- */
-function Input(props) {
-    const { name, disabled, title, style, variant = "solid", label, className: baseClassName = "", prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, showAsterisk, rightIcon, type = "text", size = "md", id, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const [isFocused, setIsFocused] = useState(false);
-    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);
-    }
-    if (type === "hidden") {
-        return (_jsx("input", { style: { display: "none" }, readOnly: true, type: "text", ref: inputRef, ...rest }));
-    }
-    const hasPrefix = !!prefix ? "hasPrefix" : "";
-    const hasSuffix = !!suffix ? "hasSuffix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynInput ${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", { disabled: disabled || isLoading, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, type: type, 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 { Input };