@arkyn/components 3.0.1-beta.99 → 3.0.2

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

@@ -1,146 +1,66 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import "./styles.css";
 type OrientationProps = "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "top" | "left" | "bottom" | "right";
 type PopoverProps = {
+    /** Content rendered inside the floating panel. Required. */
     children: ReactNode;
+    /** Trigger element — clicking it opens the popover. Required. */
     button: ReactNode;
+    /** When true, clicking the popover content also closes it. @default false */
     closeOnClick?: boolean;
+    /**
+     * Position of the floating panel relative to the trigger.
+     * Options: `"bottomLeft"` | `"bottomRight"` | `"topLeft"` | `"topRight"` | `"top"` | `"bottom"` | `"left"` | `"right"`.
+     * @default "bottomLeft"
+     */
     orientation?: OrientationProps;
+    /** Additional CSS class applied to the popover root element. */
     className?: string;
 };
 /**
- * Popover component - used for displaying contextual content in a floating container that appears relative to a trigger button
+ * Popover — floating panel that appears relative to a trigger element.
  *
- * @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
+ * Clicking outside the popover (or clicking the content when `closeOnClick` is set)
+ * dismisses it. Locks body scroll while open.
  *
- * @returns Popover JSX element with trigger button, animated content, and overlay for outside click handling
+ * @param props.children - Content to display inside the panel. Required.
+ * @param props.button - Trigger element that opens the popover. Required.
+ * @param props.closeOnClick - Clicking the content also closes the popover. Default: false
+ * @param props.orientation - Panel position relative to the trigger. Default: "bottomLeft"
+ * @param props.className - Additional CSS class for the root element.
+ *
+ * @returns Popover JSX element with trigger, animated panel, and outside-click overlay.
  *
  * @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"
- * >
+ * // Basic dropdown menu
+ * <Popover button={<Button>Options</Button>} closeOnClick>
  *   <ul>
- *     <li onClick={() => selectOption('option1')}>Option 1</li>
- *     <li onClick={() => selectOption('option2')}>Option 2</li>
- *     <li onClick={() => selectOption('option3')}>Option 3</li>
+ *     <li onClick={handleEdit}>Edit</li>
+ *     <li onClick={handleDelete}>Delete</li>
  *   </ul>
  * </Popover>
  *
- * // Popover with custom styling and left orientation
+ * // User profile menu (bottom-right)
  * <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" />}
+ *   button={<IconButton icon={User} aria-label="Account" />}
  *   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>
+ *   <nav>
+ *     <a href="/profile">Profile</a>
+ *     <a href="/settings">Settings</a>
+ *     <a href="/logout">Sign out</a>
+ *   </nav>
  * </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>
+ * // Filter panel (top-left)
+ * <Popover button={<Badge>Filters</Badge>} orientation="topLeft">
+ *   <Input name="search" placeholder="Search..." />
+ *   <Select name="status" options={statusOptions} />
  * </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;
+declare function Popover(props: PopoverProps): import("react").JSX.Element;
 export { Popover };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAClB,YAAY,GACZ,aAAa,GACb,SAAS,GACT,UAAU,GACV,KAAK,GACL,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEX,KAAK,YAAY,GAAG;IACnB,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,+BAoCnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -1,85 +1,37 @@
-import { ButtonHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes } from "react";
 import "./styles.css";
 type RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Value submitted to the form when this option is selected. Required. */
     value: string;
+    /** Applies error styling. Inherited from `RadioGroup` when not set. */
     isError?: boolean;
+    /** Size variant. Inherits from `RadioGroup` when not set. */
     size?: "sm" | "md" | "lg";
 };
 /**
- * RadioBox component - individual radio button option that must be used within a RadioGroup
+ * RadioBox — individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.
  *
- * @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.)
+ * Reads active value, size, error state, and disabled state from `RadioGroup` context.
+ * Must be used as a direct child of `RadioGroup`.
  *
- * **...Other valid HTML properties for button element**
+ * @param props.value - Option value. Required.
+ * @param props.children - Option label content (text, icons, or rich markup).
+ * @param props.disabled - Disables this option (group can also disable all options).
+ * @param props.size - Size override. Inherits from group by default.
  *
- * @returns RadioBox JSX element wrapped in a label for accessibility
+ * **...Other valid HTML `<button>` properties**
+ *
+ * @returns RadioBox JSX element.
  *
  * @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 name="plan" label="Choose a plan" onChange={setPlan}>
+ *   <RadioBox value="basic">Basic — $9/mo</RadioBox>
+ *   <RadioBox value="pro">Pro — $29/mo</RadioBox>
+ *   <RadioBox value="enterprise" disabled>Enterprise — contact us</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;
+declare function RadioBox(props: RadioBoxProps): import("react").JSX.Element;
 export { RadioBox };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9D,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAqDrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"radioContext.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radioContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAElE,KAAK,qBAAqB,GAAG;IAC5B,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;CAClB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACzB,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;CAClB,CAAC;AAIF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAU/C;AAED,iBAAS,aAAa,0BAErB;AAED,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}

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

@@ -1,93 +1,66 @@
-import { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 import "./styles.css";
 type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /** Field name used for form submission. Required. */
     name: string;
+    /** Label displayed above the group. */
     label?: string;
+    /** Appends an asterisk to the label. @default false */
     showAsterisk?: boolean;
+    /** Error message shown below the group. Overrides `fieldErrors[name]` from `FormProvider`. */
     errorMessage?: string;
+    /** Controlled selected value. */
     value?: string;
+    /** Initial selected value (uncontrolled). @default "" */
     defaultValue?: string;
+    /** Callback fired when the selected option changes. */
     onChange?: (value: string) => void;
+    /** Size variant applied to all `RadioBox` children. @default "md" */
     size?: "sm" | "md" | "lg";
+    /** Disables all `RadioBox` children. @default false */
     disabled?: boolean;
+    /** When `true`, skips the `FieldTemplate` wrapper (label, error message). @default false */
+    unShowFieldTemplate?: boolean;
+    /** Layout direction of the `FieldWrapper`. @default "horizontal" */
+    orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
- * RadioGroup component - used for creating a group of radio button options with shared state management
+ * RadioGroup — managed group of `RadioBox` options with form integration.
  *
- * @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"
+ * Renders a hidden `<input>` for native form submission. Reads `fieldErrors[name]` from
+ * the nearest `FormProvider` when no `errorMessage` is explicitly provided.
  *
- * **...Other valid HTML properties for div element (except onChange)**
+ * @param props.name - Form field name. Required.
+ * @param props.label - Label displayed above the group.
+ * @param props.showAsterisk - Appends `*` to the label. Default: false
+ * @param props.value - Controlled selection.
+ * @param props.defaultValue - Initial selection (uncontrolled). Default: `""`
+ * @param props.onChange - Called with the newly selected value.
+ * @param props.size - Size for all child `RadioBox` elements. Default: `"md"`
+ * @param props.disabled - Disables all options. Default: false
+ * @param props.errorMessage - Validation error message.
+ * @param props.unShowFieldTemplate - Omit label/error wrapper. Default: false
  *
- * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
+ * **...Other valid HTML `<div>` properties**
+ *
+ * @returns RadioGroup JSX element.
  *
  * @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" />
+ * // Uncontrolled with label
+ * <RadioGroup name="gender" label="Gender" showAsterisk defaultValue="male">
+ *   <RadioBox value="male">Male</RadioBox>
+ *   <RadioBox value="female">Female</RadioBox>
+ *   <RadioBox value="other">Other</RadioBox>
  * </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" />
+ * // Controlled with change handler
+ * <RadioGroup name="plan" label="Subscription plan" value={plan} onChange={setPlan}>
+ *   <RadioBox value="basic">Basic — $9/mo</RadioBox>
+ *   <RadioBox value="pro">Pro — $29/mo</RadioBox>
  * </RadioGroup>
  * ```
  */
-declare function RadioGroup(props: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup(props: RadioGroupProps): import("react").JSX.Element;
 export { RadioGroup };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAQjD,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAkDzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAMtD,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACzE,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qEAAqE;IACrE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oEAAoE;IACpE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,+BA0DzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -1,10 +1,10 @@
-import { LucideIcon } from "lucide-react";
-import { RichTextAlignFormatType, RichTextElementFormatType } from "../../../types/richTextTypes";
+import type { LucideIcon } from "lucide-react";
+import type { RichTextAlignFormatType, RichTextElementFormatType } from "../../../types/richTextTypes";
 import "./styles.css";
 type BlockButtonProps = {
     format: RichTextElementFormatType | RichTextAlignFormatType;
     icon: LucideIcon;
 };
-declare function BlockButton({ format, icon: Icon }: BlockButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function BlockButton({ format, icon: Icon }: BlockButtonProps): import("react").JSX.Element;
 export { BlockButton };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/blockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;IAC5D,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAsB5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/blockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO/C,OAAO,KAAK,EACX,uBAAuB,EACvB,yBAAyB,EACzB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACvB,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;IAC5D,IAAI,EAAE,UAAU,CAAC;CACjB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,gBAAgB,+BAsB5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,5 +1,5 @@
-import { RenderElementProps } from "slate-react";
+import type { RenderElementProps } from "slate-react";
 import "./styles.css";
-declare function Element({ attributes, children, element }: RenderElementProps): import("react/jsx-runtime").JSX.Element;
+declare function Element({ attributes, children, element }: RenderElementProps): import("react").JSX.Element;
 export { Element };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/element/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAgErE;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/element/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BA+ErE;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

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

@@ -1,66 +1,54 @@
-import { RichTextProps } from "../../types/richTextTypes";
+import type { RichTextProps } from "../../types/richTextTypes";
 import "./styles.css";
 /**
- * RichText component provides a feature-rich text editor with formatting capabilities
- * including bold, italic, underline, code, headings, block quotes, alignment, and image insertion.
- *
- * Built on top of Slate.js, this component offers a customizable toolbar and supports
- * character limits, form integration, and error handling.
- *
- * @param props - Configuration object for the RichText component
- * @param props.name - The name attribute for the form field (required)
- * @param props.hiddenButtons - Array of button keys to hide from the toolbar
- * @param props.imageConfig - Configuration object for image insertion functionality
- * @param props.defaultValue - Initial JSON string value for the editor content (default: "[]")
- * @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
- * @param props.onChangeCharactersCount - Callback function triggered when character count changes
- * @param props.baseErrorMessage - Custom error message to display
- * @param props.maxLimit - Maximum number of characters allowed (default: 10000)
- * @param props.onChange - Callback function triggered when editor content changes
- * @param props.isError - Whether the component should display in error state
- * @param props.id - Custom ID for the editor element
- *
- * @returns JSX element representing the rich text editor
+ * RichText — WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.
+ *
+ * **Toolbar features:** bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image and video insertion.
+ *
+ * Editor content is stored as a Slate JSON string in a hidden `<input>` for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
+ *
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed above the editor.
+ * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `["image", "code"]`).
+ * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.
+ * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: "[]"
+ * @param props.maxLimit - Maximum character count. Default: 10000
+ * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false
+ * @param props.onChangeCharactersCount - Callback fired on every keystroke — receives the current character count.
+ * @param props.onChange - Callback fired when editor content changes — receives the Slate `Descendant[]`.
+ * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).
+ * @param props.isError - Forces the error visual state.
+ * @param props.id - Custom id for the editable area element.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.orientation - Layout direction. Default: "horizontal"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ *
+ * @returns RichText JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic usage
+ * // Basic
  * <RichText name="content" />
  *
- * // With character limit and custom buttons
+ * // With character limit and hidden toolbar buttons
  * <RichText
  *   name="description"
+ *   label="Description"
  *   maxLimit={500}
- *   enforceCharacterLimit={true}
- *   hiddenButtons={["image", "code"]}
- *   onChangeCharactersCount={(count) => console.log(count)}
+ *   enforceCharacterLimit
+ *   hiddenButtons={["image", "video", "code"]}
+ *   onChangeCharactersCount={(n) => setCharCount(n)}
  * />
  *
- * // With image upload configuration
+ * // With image upload support
  * <RichText
  *   name="article"
- *   imageConfig={{
- *     action: "/api/upload",
- *     modalTitle: "Insert Image",
- *     modalInputUrlLabel: "Image URL",
- *     modalInputImageLabel: "Upload Image"
- *   }}
+ *   label="Article Body"
+ *   imageConfig={{ action: "/api/upload" }}
  * />
  * ```
- *
- * @description
- * The component includes:
- * - **Formatting**: Bold, italic, underline, code, headings (H1, H2), block quotes
- * - **Alignment**: Left, center, right, justify
- * - **Image Support**: Upload and URL insertion (when imageConfig is provided)
- * - **Character Limits**: Configurable limits with visual feedback
- * - **Form Integration**: Works with form providers and validation
- * - **Keyboard Shortcuts**: Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
- * - **Error Handling**: Visual error states and validation messages
- *
- * The editor outputs JSON data representing the document structure, which can be
- * converted to HTML using the provided utility functions.
  */
-declare function RichText(props: RichTextProps): import("react/jsx-runtime").JSX.Element;
+declare function RichText(props: RichTextProps): import("react").JSX.Element;
 export { RichText };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAEL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAMnC,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA4LrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAEX,aAAa,EACb,MAAM,2BAA2B,CAAC;AAQnC,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAuMrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -1,5 +1,5 @@
-import { RichTextInsertImageProps } from "../../../types/richTextTypes";
+import type { RichTextInsertImageProps } from "../../../types/richTextTypes";
 import "./styles.css";
-declare function InsertImage(props: RichTextInsertImageProps): import("react/jsx-runtime").JSX.Element;
+declare function InsertImage(props: RichTextInsertImageProps): import("react").JSX.Element;
 export { InsertImage };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/insertImage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAWxE,OAAO,cAAc,CAAC;AAEtB,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,2CAsGnD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/insertImage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAW7E,OAAO,cAAc,CAAC;AAEtB,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,+BAsGnD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}