@arkyn/components 3.0.1-beta.1 → 3.0.1-beta.100

package/dist/components/phoneInput/phoneInputCountryOptionsContainer/index.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useScrollLock } from "../../../hooks/useScrollLock";
+import "./styles.css";
+function PhoneInputCountryOptionsContainer(props) {
+    const { children, isOpen, onSearch, search, placeholder } = props;
+    const containerRef = useRef(null);
+    const [position, setPosition] = useState("bottom");
+    function handleSearch(e) {
+        onSearch(e.target.value);
+    }
+    useScrollLock(isOpen);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const checkContainerPosition = () => {
+            if (!containerRef.current)
+                return;
+            const parentElement = containerRef.current.parentElement;
+            if (!parentElement)
+                return;
+            const parentRect = parentElement.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const estimatedContainerHeight = 300;
+            const spaceBelow = viewportHeight - parentRect.bottom;
+            if (spaceBelow < estimatedContainerHeight &&
+                parentRect.top > estimatedContainerHeight) {
+                setPosition("top");
+            }
+            else {
+                setPosition("bottom");
+            }
+        };
+        checkContainerPosition();
+    }, [isOpen]);
+    if (!isOpen)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { className: `arkynPhoneInputCountryOptionsContainer ${position}`, ref: containerRef, children: [_jsx("input", { type: "search", name: "search-select", className: "arkynPhoneInputCountryOptionsContainerSearchSelect", value: search, id: "input-search", placeholder: placeholder, onChange: handleSearch }), children] }));
+}
+export { PhoneInputCountryOptionsContainer };

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

@@ -0,0 +1,17 @@
+import "./styles.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputCountrySelectorProps = {
+    size: "md" | "lg";
+    currentCountry: CountryType;
+    onClick: () => void;
+};
+declare function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountrySelector };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountrySelector/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { Divider } from "../../divider";
+import "./styles.css";
+function PhoneInputCountrySelector(props) {
+    const { currentCountry, onClick } = props;
+    return (_jsxs("div", { className: "phoneInputSelectCountry", onClick: onClick, children: [_jsx("img", { className: "flag", src: currentCountry.flag, alt: currentCountry.name }), _jsx(ChevronDown, { className: "chevronDown", strokeWidth: 2.5 }), _jsx(Divider, { orientation: "vertical" })] }));
+}
+export { PhoneInputCountrySelector };

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

@@ -0,0 +1,23 @@
+import "./style.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputMaskProps = {
+    onFocus: () => void;
+    onBlur: () => void;
+    disabled: boolean;
+    readonly: boolean;
+    size: "md" | "lg";
+    currentCountry: CountryType;
+    value: string;
+    onChange: (e: string) => void;
+    id: string;
+};
+declare const PhoneInputMask: import("react").ForwardRefExoticComponent<PhoneInputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
+export { PhoneInputMask };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,aAAa,CAAC;AAErB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AASF,QAAA,MAAM,cAAc,kHAqEnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputMask/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputMask } from "@react-input/mask";
+import { forwardRef, useEffect, useState, } from "react";
+import { applyMask, clear, getMask, MAX_LENGTH, TYPES, } from "../../../utils/phoneInputUtilities";
+import "./style.css";
+const BaseInput = forwardRef((props, ref) => {
+    return _jsx("input", { ref: ref, ...props });
+});
+const PhoneInputMask = forwardRef((props, ref) => {
+    const { onFocus, readonly, onBlur, size, onChange, value, currentCountry, disabled, id, } = props;
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        if (isMounted)
+            onChange(currentCountry.mask);
+        else
+            setIsMounted(true);
+    }, [currentCountry]);
+    const className = `phoneInputMask ${size}`;
+    function handleChange(event) {
+        let value = clear(event.target.value);
+        const mask = getMask(value);
+        let nextLength = value.length;
+        if (nextLength > MAX_LENGTH)
+            return;
+        value = applyMask(value, TYPES[mask]);
+        event.target.value = value;
+        onChange(value);
+    }
+    if (currentCountry.code === "+55") {
+        return (_jsx("input", { id: id, value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
+    }
+    return (_jsx(InputMask, { id: id, value: value, readOnly: readonly, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: currentCountry.mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
+});
+export { PhoneInputMask };

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

@@ -0,0 +1,146 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type OrientationProps = "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "top" | "left" | "bottom" | "right";
+type PopoverProps = {
+    children: ReactNode;
+    button: ReactNode;
+    closeOnClick?: boolean;
+    orientation?: OrientationProps;
+    className?: string;
+};
+/**
+ * Popover component - used for displaying contextual content in a floating container that appears relative to a trigger button
+ *
+ * @param props - Popover component properties
+ * @param props.children - Required content to display inside the popover when opened
+ * @param props.button - Required trigger element that opens the popover when clicked
+ * @param props.closeOnClick - Whether the popover should close when clicking on its content. Default: undefined (remains open)
+ * @param props.orientation - Position where the popover appears relative to the trigger button. Default: "bottomLeft"
+ * @param props.className - Additional CSS classes for styling the popover container
+ *
+ * @returns Popover JSX element with trigger button, animated content, and overlay for outside click handling
+ *
+ * @example
+ * ```tsx
+ * // Basic popover with default orientation
+ * <Popover
+ *   button={<button>Click me</button>}
+ * >
+ *   <div>Popover content here</div>
+ * </Popover>
+ *
+ * // Popover with custom orientation
+ * <Popover
+ *   button={<IconButton icon="menu" />}
+ *   orientation="topRight"
+ * >
+ *   <nav>
+ *     <a href="/profile">Profile</a>
+ *     <a href="/settings">Settings</a>
+ *     <a href="/logout">Logout</a>
+ *   </nav>
+ * </Popover>
+ *
+ * // Popover that closes when content is clicked
+ * <Popover
+ *   button={<Button>Select Option</Button>}
+ *   closeOnClick
+ *   orientation="bottom"
+ * >
+ *   <ul>
+ *     <li onClick={() => selectOption('option1')}>Option 1</li>
+ *     <li onClick={() => selectOption('option2')}>Option 2</li>
+ *     <li onClick={() => selectOption('option3')}>Option 3</li>
+ *   </ul>
+ * </Popover>
+ *
+ * // Popover with custom styling and left orientation
+ * <Popover
+ *   button={<Button variant="outline">Info</Button>}
+ *   orientation="left"
+ *   className="custom-popover"
+ * >
+ *   <div className="info-panel">
+ *     <h3>Additional Information</h3>
+ *     <p>This is some helpful information that appears in a popover.</p>
+ *     <Button size="sm">Learn More</Button>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover with form content and top-right positioning
+ * <Popover
+ *   button={<Badge>Filter</Badge>}
+ *   orientation="topRight"
+ * >
+ *   <form className="filter-form">
+ *     <Input name="search" placeholder="Search..." />
+ *     <Select name="category" options={categories} />
+ *     <Button type="submit">Apply Filters</Button>
+ *   </form>
+ * </Popover>
+ *
+ * // Popover with complex content and bottom-right positioning
+ * <Popover
+ *   button={<Avatar src="/user.jpg" />}
+ *   orientation="bottomRight"
+ *   closeOnClick
+ * >
+ *   <div className="user-menu">
+ *     <div className="user-info">
+ *       <img src="/user.jpg" alt="User" />
+ *       <div>
+ *         <h4>John Doe</h4>
+ *         <p>john@example.com</p>
+ *       </div>
+ *     </div>
+ *     <Divider />
+ *     <MenuItem icon="user">Profile</MenuItem>
+ *     <MenuItem icon="settings">Settings</MenuItem>
+ *     <MenuItem icon="logout">Sign Out</MenuItem>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover for context menu with right orientation
+ * <Popover
+ *   button={<Button variant="ghost" size="sm">⋮</Button>}
+ *   orientation="right"
+ *   closeOnClick
+ * >
+ *   <div className="context-menu">
+ *     <button onClick={() => editItem()}>Edit</button>
+ *     <button onClick={() => duplicateItem()}>Duplicate</button>
+ *     <button onClick={() => deleteItem()}>Delete</button>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover with notification content and top positioning
+ * <Popover
+ *   button={<Badge count={3}>🔔</Badge>}
+ *   orientation="top"
+ * >
+ *   <div className="notifications">
+ *     <h3>Recent Notifications</h3>
+ *     <div className="notification-item">New message received</div>
+ *     <div className="notification-item">Task completed</div>
+ *     <div className="notification-item">Meeting reminder</div>
+ *     <Button variant="ghost" size="sm">View All</Button>
+ *   </div>
+ * </Popover>
+ * ```
+ *
+ * @remarks
+ * This component provides:
+ * - 8 different orientation options for flexible positioning (bottomLeft, bottomRight, topLeft, topRight, top, left, bottom, right)
+ * - Smooth fade animation using Framer Motion for opening and closing
+ * - Automatic scroll lock when popover is open to prevent background scrolling
+ * - Click-outside-to-close functionality via overlay
+ * - Optional click-on-content-to-close behavior
+ * - Full accessibility support for keyboard navigation and screen readers
+ *
+ * The popover automatically handles positioning, animations, and user interactions.
+ * It uses CSS classes for styling and can be customized through the className prop.
+ * The component is ideal for dropdowns, context menus, tooltips, and any contextual UI elements.
+ */
+declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export { Popover };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GACjB,YAAY,GACZ,aAAa,GACb,SAAS,GACT,UAAU,GACV,KAAK,GACL,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoIG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAwCnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/popover/index.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { useScrollLock } from "../../hooks/useScrollLock";
+import "./styles.css";
+/**
+ * Popover component - used for displaying contextual content in a floating container that appears relative to a trigger button
+ *
+ * @param props - Popover component properties
+ * @param props.children - Required content to display inside the popover when opened
+ * @param props.button - Required trigger element that opens the popover when clicked
+ * @param props.closeOnClick - Whether the popover should close when clicking on its content. Default: undefined (remains open)
+ * @param props.orientation - Position where the popover appears relative to the trigger button. Default: "bottomLeft"
+ * @param props.className - Additional CSS classes for styling the popover container
+ *
+ * @returns Popover JSX element with trigger button, animated content, and overlay for outside click handling
+ *
+ * @example
+ * ```tsx
+ * // Basic popover with default orientation
+ * <Popover
+ *   button={<button>Click me</button>}
+ * >
+ *   <div>Popover content here</div>
+ * </Popover>
+ *
+ * // Popover with custom orientation
+ * <Popover
+ *   button={<IconButton icon="menu" />}
+ *   orientation="topRight"
+ * >
+ *   <nav>
+ *     <a href="/profile">Profile</a>
+ *     <a href="/settings">Settings</a>
+ *     <a href="/logout">Logout</a>
+ *   </nav>
+ * </Popover>
+ *
+ * // Popover that closes when content is clicked
+ * <Popover
+ *   button={<Button>Select Option</Button>}
+ *   closeOnClick
+ *   orientation="bottom"
+ * >
+ *   <ul>
+ *     <li onClick={() => selectOption('option1')}>Option 1</li>
+ *     <li onClick={() => selectOption('option2')}>Option 2</li>
+ *     <li onClick={() => selectOption('option3')}>Option 3</li>
+ *   </ul>
+ * </Popover>
+ *
+ * // Popover with custom styling and left orientation
+ * <Popover
+ *   button={<Button variant="outline">Info</Button>}
+ *   orientation="left"
+ *   className="custom-popover"
+ * >
+ *   <div className="info-panel">
+ *     <h3>Additional Information</h3>
+ *     <p>This is some helpful information that appears in a popover.</p>
+ *     <Button size="sm">Learn More</Button>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover with form content and top-right positioning
+ * <Popover
+ *   button={<Badge>Filter</Badge>}
+ *   orientation="topRight"
+ * >
+ *   <form className="filter-form">
+ *     <Input name="search" placeholder="Search..." />
+ *     <Select name="category" options={categories} />
+ *     <Button type="submit">Apply Filters</Button>
+ *   </form>
+ * </Popover>
+ *
+ * // Popover with complex content and bottom-right positioning
+ * <Popover
+ *   button={<Avatar src="/user.jpg" />}
+ *   orientation="bottomRight"
+ *   closeOnClick
+ * >
+ *   <div className="user-menu">
+ *     <div className="user-info">
+ *       <img src="/user.jpg" alt="User" />
+ *       <div>
+ *         <h4>John Doe</h4>
+ *         <p>john@example.com</p>
+ *       </div>
+ *     </div>
+ *     <Divider />
+ *     <MenuItem icon="user">Profile</MenuItem>
+ *     <MenuItem icon="settings">Settings</MenuItem>
+ *     <MenuItem icon="logout">Sign Out</MenuItem>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover for context menu with right orientation
+ * <Popover
+ *   button={<Button variant="ghost" size="sm">⋮</Button>}
+ *   orientation="right"
+ *   closeOnClick
+ * >
+ *   <div className="context-menu">
+ *     <button onClick={() => editItem()}>Edit</button>
+ *     <button onClick={() => duplicateItem()}>Duplicate</button>
+ *     <button onClick={() => deleteItem()}>Delete</button>
+ *   </div>
+ * </Popover>
+ *
+ * // Popover with notification content and top positioning
+ * <Popover
+ *   button={<Badge count={3}>🔔</Badge>}
+ *   orientation="top"
+ * >
+ *   <div className="notifications">
+ *     <h3>Recent Notifications</h3>
+ *     <div className="notification-item">New message received</div>
+ *     <div className="notification-item">Task completed</div>
+ *     <div className="notification-item">Meeting reminder</div>
+ *     <Button variant="ghost" size="sm">View All</Button>
+ *   </div>
+ * </Popover>
+ * ```
+ *
+ * @remarks
+ * This component provides:
+ * - 8 different orientation options for flexible positioning (bottomLeft, bottomRight, topLeft, topRight, top, left, bottom, right)
+ * - Smooth fade animation using Framer Motion for opening and closing
+ * - Automatic scroll lock when popover is open to prevent background scrolling
+ * - Click-outside-to-close functionality via overlay
+ * - Optional click-on-content-to-close behavior
+ * - Full accessibility support for keyboard navigation and screen readers
+ *
+ * The popover automatically handles positioning, animations, and user interactions.
+ * It uses CSS classes for styling and can be customized through the className prop.
+ * The component is ideal for dropdowns, context menus, tooltips, and any contextual UI elements.
+ */
+function Popover(props) {
+    const { children, button, closeOnClick, className: baseClassName = "", orientation = "bottomLeft", } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const visible = isOpen ? "visibleTrue" : "visibleFalse";
+    const className = `arkynPopover ${orientation} ${visible} ${baseClassName}`;
+    function handleOpenPopover() {
+        if (!isOpen)
+            setIsOpen(true);
+    }
+    useScrollLock(isOpen);
+    return (_jsxs("div", { className: className, onClick: handleOpenPopover, children: [button, _jsx(motion.div, { style: { visibility: isOpen ? "visible" : "hidden" }, transition: { ease: "easeOut", duration: 0 }, initial: { opacity: 0 }, animate: { opacity: isOpen ? 1 : 0 }, exit: { opacity: 0 }, onClick: () => closeOnClick && setIsOpen(false), className: "arkynPopoverContent", children: children }), isOpen && (_jsx("div", { onClick: () => setIsOpen(false), className: "arkynPopoverOverlay" }))] }));
+}
+export { Popover };

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

@@ -0,0 +1,85 @@
+import { ButtonHTMLAttributes } from "react";
+import "./styles.css";
+type RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    value: string;
+    isError?: boolean;
+    size?: "sm" | "md" | "lg";
+};
+/**
+ * RadioBox component - individual radio button option that must be used within a RadioGroup
+ *
+ * @param props - RadioBox component properties
+ * @param props.value - Required unique value for this radio option within the group
+ * @param props.isError - Optional error state indicator for styling
+ * @param props.size - Size variant for the radio box, inherits from RadioGroup if not specified
+ * @param props.children - Content to display next to the radio button (label text, icons, etc.)
+ *
+ * **...Other valid HTML properties for button element**
+ *
+ * @returns RadioBox JSX element wrapped in a label for accessibility
+ *
+ * @example
+ * ```tsx
+ * // Basic radio boxes within a group
+ * <RadioGroup name="gender">
+ *   <RadioBox value="male">Male</RadioBox>
+ *   <RadioBox value="female">Female</RadioBox>
+ *   <RadioBox value="other">Other</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with rich content
+ * <RadioGroup name="plan" label="Choose your plan">
+ *   <RadioBox value="basic">
+ *     <div>
+ *       <h4>Basic Plan</h4>
+ *       <p>$9.99/month - Perfect for individuals</p>
+ *     </div>
+ *   </RadioBox>
+ *   <RadioBox value="premium">
+ *     <div>
+ *       <h4>Premium Plan</h4>
+ *       <p>$19.99/month - Great for small teams</p>
+ *     </div>
+ *   </RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom size override
+ * <RadioGroup name="priority" size="md">
+ *   <RadioBox value="low" size="sm">Low Priority</RadioBox>
+ *   <RadioBox value="medium">Medium Priority</RadioBox>
+ *   <RadioBox value="high" size="lg">High Priority</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with disabled state
+ * <RadioGroup name="options">
+ *   <RadioBox value="option1">Available Option</RadioBox>
+ *   <RadioBox value="option2" disabled>Disabled Option</RadioBox>
+ *   <RadioBox value="option3">Another Available Option</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom styling
+ * <RadioGroup name="theme">
+ *   <RadioBox value="light" className="theme-option">
+ *     🌞 Light Theme
+ *   </RadioBox>
+ *   <RadioBox value="dark" className="theme-option">
+ *     🌙 Dark Theme
+ *   </RadioBox>
+ *   <RadioBox value="auto" className="theme-option">
+ *     🔄 Auto Theme
+ *   </RadioBox>
+ * </RadioGroup>
+ * ```
+ *
+ * @remarks
+ * This component must be used as a child of RadioGroup. It automatically inherits:
+ * - Group name for form handling
+ * - Size from parent RadioGroup (unless overridden)
+ * - Change handlers and state management
+ * - Error states from form validation
+ *
+ * The component handles both click and focus events for accessibility.
+ */
+declare function RadioBox(props: RadioBoxProps): import("react/jsx-runtime").JSX.Element;
+export { RadioBox };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAqDrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/radio/radioBox/index.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRadioGroup } from "../radioContext";
+import "./styles.css";
+/**
+ * RadioBox component - individual radio button option that must be used within a RadioGroup
+ *
+ * @param props - RadioBox component properties
+ * @param props.value - Required unique value for this radio option within the group
+ * @param props.isError - Optional error state indicator for styling
+ * @param props.size - Size variant for the radio box, inherits from RadioGroup if not specified
+ * @param props.children - Content to display next to the radio button (label text, icons, etc.)
+ *
+ * **...Other valid HTML properties for button element**
+ *
+ * @returns RadioBox JSX element wrapped in a label for accessibility
+ *
+ * @example
+ * ```tsx
+ * // Basic radio boxes within a group
+ * <RadioGroup name="gender">
+ *   <RadioBox value="male">Male</RadioBox>
+ *   <RadioBox value="female">Female</RadioBox>
+ *   <RadioBox value="other">Other</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with rich content
+ * <RadioGroup name="plan" label="Choose your plan">
+ *   <RadioBox value="basic">
+ *     <div>
+ *       <h4>Basic Plan</h4>
+ *       <p>$9.99/month - Perfect for individuals</p>
+ *     </div>
+ *   </RadioBox>
+ *   <RadioBox value="premium">
+ *     <div>
+ *       <h4>Premium Plan</h4>
+ *       <p>$19.99/month - Great for small teams</p>
+ *     </div>
+ *   </RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom size override
+ * <RadioGroup name="priority" size="md">
+ *   <RadioBox value="low" size="sm">Low Priority</RadioBox>
+ *   <RadioBox value="medium">Medium Priority</RadioBox>
+ *   <RadioBox value="high" size="lg">High Priority</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with disabled state
+ * <RadioGroup name="options">
+ *   <RadioBox value="option1">Available Option</RadioBox>
+ *   <RadioBox value="option2" disabled>Disabled Option</RadioBox>
+ *   <RadioBox value="option3">Another Available Option</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom styling
+ * <RadioGroup name="theme">
+ *   <RadioBox value="light" className="theme-option">
+ *     🌞 Light Theme
+ *   </RadioBox>
+ *   <RadioBox value="dark" className="theme-option">
+ *     🌙 Dark Theme
+ *   </RadioBox>
+ *   <RadioBox value="auto" className="theme-option">
+ *     🔄 Auto Theme
+ *   </RadioBox>
+ * </RadioGroup>
+ * ```
+ *
+ * @remarks
+ * This component must be used as a child of RadioGroup. It automatically inherits:
+ * - Group name for form handling
+ * - Size from parent RadioGroup (unless overridden)
+ * - Change handlers and state management
+ * - Error states from form validation
+ *
+ * The component handles both click and focus events for accessibility.
+ */
+function RadioBox(props) {
+    const { value: componentValue, size: componentSize, disabled, children, className: baseClassName = "", onClick, onFocus, ...rest } = props;
+    const { handleChange, size: groupSize, value, isError, disabled: groupDisabled, } = useRadioGroup();
+    const isChecked = value === componentValue;
+    const size = componentSize || groupSize;
+    const isDisabled = disabled || groupDisabled;
+    const checkedClass = isChecked ? "checkedTrue" : "checkedFalse";
+    const errorClass = !!isError ? "errorTrue" : "errorFalse";
+    const disabledClass = isDisabled ? "disabledTrue" : "disabledFalse";
+    const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
+    function handleClick(event) {
+        onClick && onClick(event);
+        handleChange(componentValue);
+    }
+    function handleFocus(event) {
+        onFocus && onFocus(event);
+        handleChange(componentValue);
+    }
+    return (_jsxs("label", { className: className.trim(), children: [_jsx("button", { type: "button", disabled: isDisabled, onClick: handleClick, onFocus: handleFocus, ...rest }), children] }));
+}
+export { RadioBox };

package/dist/components/radio/radioContext.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+type RadioGroupContextType = {
+    value: string;
+    isError: boolean;
+    size: "sm" | "md" | "lg";
+    handleChange: (value: string) => void;
+    disabled: boolean;
+};
+type RadioProviderProps = {
+    children: ReactNode;
+    isError: boolean;
+    size: "sm" | "md" | "lg";
+    value: string;
+    handleChange: (value: string) => void;
+    disabled: boolean;
+};
+declare function RadioProvider(props: RadioProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useRadioGroup(): RadioGroupContextType;
+export { RadioProvider, useRadioGroup };
+//# sourceMappingURL=radioContext.d.ts.map

package/dist/components/radio/radioContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioContext.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radioContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAEvE,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAU/C;AAED,iBAAS,aAAa,0BAErB;AAED,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/radio/radioContext.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const radioContext = createContext({});
+function RadioProvider(props) {
+    const { children, size, isError, handleChange, value, disabled } = props;
+    return (_jsx(radioContext.Provider, { value: { handleChange, value, size, isError, disabled }, children: children }));
+}
+function useRadioGroup() {
+    return useContext(radioContext);
+}
+export { RadioProvider, useRadioGroup };