@arkyn/components 3.0.1-beta.4 → 3.0.1-beta.40

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;AAI7C,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,2CAiCrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,90 @@
+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 = "", ...rest } = props;
+    const { handleChange, size: groupSize, value, isError } = useRadioGroup();
+    const isChecked = value === componentValue;
+    const size = componentSize || groupSize;
+    const checkedClass = isChecked ? "checkedTrue" : "checkedFalse";
+    const errorClass = !!isError ? "errorTrue" : "errorFalse";
+    const disabledClass = disabled ? "disabledTrue" : "disabledFalse";
+    const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
+    return (_jsxs("label", { className: className.trim(), children: [_jsx("button", { type: "button", disabled: disabled, onClick: () => handleChange(componentValue), onFocus: () => handleChange(componentValue), ...rest }), children] }));
+}
+export { RadioBox };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+type RadioGroupContextType = {
+    value: string;
+    isError: boolean;
+    size: "sm" | "md" | "lg";
+    handleChange: (value: string) => void;
+};
+type RadioProviderProps = {
+    children: ReactNode;
+    isError: boolean;
+    size: "sm" | "md" | "lg";
+    value: string;
+    handleChange: (value: string) => void;
+};
+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;CACvC,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;CACvC,CAAC;AAIF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAQ/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 } = props;
+    return (_jsx(radioContext.Provider, { value: { handleChange, value, size, isError }, children: children }));
+}
+function useRadioGroup() {
+    return useContext(radioContext);
+}
+export { RadioProvider, useRadioGroup };

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

@@ -0,0 +1,92 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    name: string;
+    label?: string;
+    showAsterisk?: boolean;
+    errorMessage?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: "sm" | "md" | "lg";
+};
+/**
+ * RadioGroup component - used for creating a group of radio button options with shared state management
+ *
+ * @param props - RadioGroup component properties
+ * @param props.name - Required field name for form handling and radio button grouping
+ * @param props.label - Optional label text to display above the radio group
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the radio group
+ * @param props.value - Controlled value for the selected radio option
+ * @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"
+ *
+ * **...Other valid HTML properties for div element (except onChange)**
+ *
+ * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
+ *
+ * @example
+ * ```tsx
+ * // Basic radio group
+ * <RadioGroup name="gender">
+ *   <Radio value="male" label="Male" />
+ *   <Radio value="female" label="Female" />
+ *   <Radio value="other" label="Other" />
+ * </RadioGroup>
+ *
+ * // Radio group with label and validation
+ * <RadioGroup
+ *   name="subscription"
+ *   label="Choose your plan"
+ *   showAsterisk
+ *   errorMessage="Please select a subscription plan"
+ * >
+ *   <Radio value="basic" label="Basic Plan - $9.99/month" />
+ *   <Radio value="premium" label="Premium Plan - $19.99/month" />
+ *   <Radio value="enterprise" label="Enterprise Plan - $49.99/month" />
+ * </RadioGroup>
+ *
+ * // Controlled radio group with callback
+ * <RadioGroup
+ *   name="theme"
+ *   label="Select Theme"
+ *   value={selectedTheme}
+ *   onChange={(value) => setSelectedTheme(value)}
+ *   size="lg"
+ * >
+ *   <Radio value="light" label="Light Theme" />
+ *   <Radio value="dark" label="Dark Theme" />
+ *   <Radio value="auto" label="Auto (System)" />
+ * </RadioGroup>
+ *
+ * // Radio group with default selection
+ * <RadioGroup
+ *   name="language"
+ *   label="Preferred Language"
+ *   defaultValue="en"
+ *   size="sm"
+ * >
+ *   <Radio value="en" label="English" />
+ *   <Radio value="es" label="Spanish" />
+ *   <Radio value="fr" label="French" />
+ *   <Radio value="pt" label="Portuguese" />
+ * </RadioGroup>
+ *
+ * // Radio group with custom styling and onChange handler
+ * <RadioGroup
+ *   name="difficulty"
+ *   label="Select Difficulty Level"
+ *   className="custom-radio-group"
+ *   onChange={(value) => console.log('Selected difficulty:', value)}
+ * >
+ *   <Radio value="easy" label="Easy" />
+ *   <Radio value="medium" label="Medium" />
+ *   <Radio value="hard" label="Hard" />
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup(props: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAgDzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FieldError } from "../../../components/fieldError";
+import { FieldLabel } from "../../../components/fieldLabel";
+import { FieldWrapper } from "../../../components/fieldWrapper";
+import { useForm } from "../../../hooks/useForm";
+import { RadioProvider } from "../radioContext";
+import "./styles.css";
+/**
+ * RadioGroup component - used for creating a group of radio button options with shared state management
+ *
+ * @param props - RadioGroup component properties
+ * @param props.name - Required field name for form handling and radio button grouping
+ * @param props.label - Optional label text to display above the radio group
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the radio group
+ * @param props.value - Controlled value for the selected radio option
+ * @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"
+ *
+ * **...Other valid HTML properties for div element (except onChange)**
+ *
+ * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
+ *
+ * @example
+ * ```tsx
+ * // Basic radio group
+ * <RadioGroup name="gender">
+ *   <Radio value="male" label="Male" />
+ *   <Radio value="female" label="Female" />
+ *   <Radio value="other" label="Other" />
+ * </RadioGroup>
+ *
+ * // Radio group with label and validation
+ * <RadioGroup
+ *   name="subscription"
+ *   label="Choose your plan"
+ *   showAsterisk
+ *   errorMessage="Please select a subscription plan"
+ * >
+ *   <Radio value="basic" label="Basic Plan - $9.99/month" />
+ *   <Radio value="premium" label="Premium Plan - $19.99/month" />
+ *   <Radio value="enterprise" label="Enterprise Plan - $49.99/month" />
+ * </RadioGroup>
+ *
+ * // Controlled radio group with callback
+ * <RadioGroup
+ *   name="theme"
+ *   label="Select Theme"
+ *   value={selectedTheme}
+ *   onChange={(value) => setSelectedTheme(value)}
+ *   size="lg"
+ * >
+ *   <Radio value="light" label="Light Theme" />
+ *   <Radio value="dark" label="Dark Theme" />
+ *   <Radio value="auto" label="Auto (System)" />
+ * </RadioGroup>
+ *
+ * // Radio group with default selection
+ * <RadioGroup
+ *   name="language"
+ *   label="Preferred Language"
+ *   defaultValue="en"
+ *   size="sm"
+ * >
+ *   <Radio value="en" label="English" />
+ *   <Radio value="es" label="Spanish" />
+ *   <Radio value="fr" label="French" />
+ *   <Radio value="pt" label="Portuguese" />
+ * </RadioGroup>
+ *
+ * // Radio group with custom styling and onChange handler
+ * <RadioGroup
+ *   name="difficulty"
+ *   label="Select Difficulty Level"
+ *   className="custom-radio-group"
+ *   onChange={(value) => console.log('Selected difficulty:', value)}
+ * >
+ *   <Radio value="easy" label="Easy" />
+ *   <Radio value="medium" label="Medium" />
+ *   <Radio value="hard" label="Hard" />
+ * </RadioGroup>
+ * ```
+ */
+function RadioGroup(props) {
+    const { defaultValue = "", name, label, showAsterisk, errorMessage: baseErrorMessage, value: forceValue, onChange, size = "md", className: baseClassName = "", ...rest } = props;
+    const [value, setValue] = useState(defaultValue);
+    const { fieldErrors } = useForm();
+    function handleChange(value) {
+        setValue(value);
+        if (onChange)
+            onChange(value);
+    }
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const className = `arkynRadioGroup ${size} ${baseClassName}`;
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(RadioProvider, { isError: isError, size: size, value: forceValue || value, handleChange: handleChange, children: [_jsx("input", { style: { display: "none" }, type: "text", readOnly: true, name: name, value: forceValue || value }), _jsx("div", { className: className.trim(), ...rest })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { RadioGroup };

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

@@ -0,0 +1,41 @@
+type RichTextHiddenButtonKey = "headingOne" | "headingTwo" | "blockQuote" | "bold" | "italic" | "underline" | "code" | "left" | "right" | "center" | "justify" | "image";
+type RichTextElementFormatType = "blockQuote" | "bulletedList" | "headingOne" | "headingTwo" | "listItem" | "numberedList" | "paragraph" | "image";
+type RichTextAlignFormatType = "center" | "left" | "right" | "justify";
+type RichTextMarkFormatType = "bold" | "italic" | "underline" | "code";
+type RichTextInsertImageProps = {
+    action: string;
+    tabLabels?: [string, string];
+    modalTitle?: string;
+    modalInputUrlLabel?: string;
+    modalInputImageLabel?: string;
+    modalCancelButton?: string;
+    modalConfirmButton?: string;
+};
+type RichTextCustomElement = {
+    type: RichTextElementFormatType;
+    align?: RichTextAlignFormatType;
+    src?: string;
+    children?: RichTextValue;
+};
+type RichTextCustomText = {
+    bold?: boolean;
+    text: string;
+    italic?: boolean;
+    code?: boolean;
+    underline?: boolean;
+};
+type Descendant = RichTextCustomElement | RichTextCustomText;
+type RichTextProps = {
+    name: string;
+    hiddenButtons?: RichTextHiddenButtonKey[];
+    maxLimit?: number;
+    enforceCharacterLimit?: boolean;
+    defaultValue?: string;
+    isError?: boolean;
+    imageConfig?: RichTextInsertImageProps;
+    onChangeCharactersCount?: (e: number) => void;
+    onChange?: (value: Descendant[]) => void;
+};
+type RichTextValue = Descendant[];
+export type { Descendant, RichTextAlignFormatType, RichTextCustomElement, RichTextCustomText, RichTextElementFormatType, RichTextHiddenButtonKey, RichTextInsertImageProps, RichTextMarkFormatType, RichTextProps, RichTextValue, };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"AAAA,KAAK,uBAAuB,GACxB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,QAAQ,GACR,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,GACT,OAAO,CAAC;AAEZ,KAAK,yBAAyB,GAC1B,YAAY,GACZ,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,cAAc,GACd,WAAW,GACX,OAAO,CAAC;AAEZ,KAAK,uBAAuB,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvE,KAAK,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAC;AAEvE,KAAK,wBAAwB,GAAG;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,yBAAyB,CAAC;IAChC,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,UAAU,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAE7D,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,KAAK,aAAa,GAAG,UAAU,EAAE,CAAC;AAElC,YAAY,EACV,UAAU,EACV,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,sBAAsB,EACtB,aAAa,EACb,aAAa,GACd,CAAC"}

package/dist/components/richText/index.js

@@ -0,0 +1 @@
+export {};