@arkyn/components 3.0.1-beta.143 → 3.0.1-beta.145

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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;IAC/D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuCjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/D,qDAAqD;IACrD,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuCjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/button/index.js

@@ -3,47 +3,37 @@ import { Loader2 } from "lucide-react";
 import { IconRenderer } from "../../services/iconRenderer";
 import "./styles.css";
 /**
- * Button component - used for user interactions and form submissions
+ * Button — used for user interactions and form submissions.
  *
- * @param props - Button component properties
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.loadingText - Text to display during loading state
- * @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"
- * @param props.leftIcon - Optional icon to display on the left
- * @param props.rightIcon - Optional icon to display on the right
+ * @param props.isLoading - Shows a spinner and disables the button. Default: false
+ * @param props.loadingText - Text displayed beside the spinner when loading.
+ * @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.scheme - Color scheme. Default: "primary"
+ * @param props.leftIcon - Lucide icon rendered to the left of the label.
+ * @param props.rightIcon - Lucide icon rendered to the right of the label.
  *
- * **...Other valid HTML properties for button**
+ * **...Other valid HTML properties for `<button>`**
  *
- * @returns Button JSX element
+ * @returns Button JSX element.
  *
  * @example
  * ```tsx
  * // Basic button
  * <Button>Click me</Button>
  *
- * // Button with color scheme
+ * // With color scheme
  * <Button scheme="success">Save</Button>
  *
- * // Button with loading state
- * <Button isLoading loadingText="Saving...">
- *  Save
- * </Button>
+ * // With loading state
+ * <Button isLoading loadingText="Saving...">Save</Button>
  *
- * // Button with icons
- * <Button leftIcon={SaveIcon} scheme="success">
- *  Save
- * </Button>
+ * // With icons
+ * <Button leftIcon={SaveIcon} scheme="success">Save</Button>
  *
- * // Custom button
- * <Button
- *  size="lg"
- *  variant="outline"
- *  scheme="danger"
- *  rightIcon={TrashIcon}
- * >
- *  Delete
+ * // Custom size, variant and scheme
+ * <Button size="lg" variant="outline" scheme="danger" rightIcon={TrashIcon}>
+ *   Delete
  * </Button>
  * ```
  */

package/dist/components/cardTab/cardTabButton/index.d.ts

@@ -1,69 +1,31 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import "./styles.css";
 type CardTabButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "type"> & {
+    /** Content displayed inside the tab button. */
     children: ReactNode;
+    /** Unique identifier for this tab; matched against the container's active value. */
     value: string;
 };
 /**
- * CardTabButton component - used as interactive buttons within a CardTabContainer for tab navigation
+ * CardTabButton — individual tab button inside a `CardTabContainer`.
  *
- * @param props - CardTabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by CardTabContainer's disabled state
+ * Reads active state and disabled state from `CardTabContainer` context.
+ * The button's own `disabled` prop is ORed with the container's `disabled`.
  *
- * **...Other valid HTML button properties except children, value, and type**
+ * @param props.children - Tab label content. Required.
+ * @param props.value - Tab identifier. Required.
+ * @param props.disabled - Disables this tab individually (container can also disable all tabs).
  *
- * @returns CardTabButton JSX element
+ * **...Other valid HTML `<button>` properties except `type`**
  *
- * @example
- * ```tsx
- * // Basic tab buttons within CardTabContainer
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <CardTabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <CardTabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <CardTabContainer>
- *   <CardTabButton value="available">Available</CardTabButton>
- *   <CardTabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </CardTabButton>
- * </CardTabContainer>
- * ```
+ * @returns CardTabButton JSX element.
  *
  * @example
  * ```tsx
- * // Tab buttons with custom styling and default value
- * <CardTabContainer defaultValue="dashboard">
- *   <CardTabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="reports">Reports</CardTabButton>
+ * <CardTabContainer defaultValue="details" onChange={setTab}>
+ *   <CardTabButton value="details">Details</CardTabButton>
+ *   <CardTabButton value="history">History</CardTabButton>
+ *   <CardTabButton value="settings" disabled>Settings</CardTabButton>
  * </CardTabContainer>
  * ```
  */

package/dist/components/cardTab/cardTabButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cardTab/cardTabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG,IAAI,CAC5B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,MAAM,CAC9B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAkC/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cardTab/cardTabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG,IAAI,CAC5B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,MAAM,CAC9B,GAAG;IACF,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAkC/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/cardTab/cardTabButton/index.js

@@ -2,65 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCardTab } from "../cardTabContext";
 import "./styles.css";
 /**
- * CardTabButton component - used as interactive buttons within a CardTabContainer for tab navigation
+ * CardTabButton — individual tab button inside a `CardTabContainer`.
  *
- * @param props - CardTabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by CardTabContainer's disabled state
+ * Reads active state and disabled state from `CardTabContainer` context.
+ * The button's own `disabled` prop is ORed with the container's `disabled`.
  *
- * **...Other valid HTML button properties except children, value, and type**
+ * @param props.children - Tab label content. Required.
+ * @param props.value - Tab identifier. Required.
+ * @param props.disabled - Disables this tab individually (container can also disable all tabs).
  *
- * @returns CardTabButton JSX element
+ * **...Other valid HTML `<button>` properties except `type`**
  *
- * @example
- * ```tsx
- * // Basic tab buttons within CardTabContainer
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <CardTabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <CardTabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <CardTabContainer>
- *   <CardTabButton value="available">Available</CardTabButton>
- *   <CardTabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </CardTabButton>
- * </CardTabContainer>
- * ```
+ * @returns CardTabButton JSX element.
  *
  * @example
  * ```tsx
- * // Tab buttons with custom styling and default value
- * <CardTabContainer defaultValue="dashboard">
- *   <CardTabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="reports">Reports</CardTabButton>
+ * <CardTabContainer defaultValue="details" onChange={setTab}>
+ *   <CardTabButton value="details">Details</CardTabButton>
+ *   <CardTabButton value="history">History</CardTabButton>
+ *   <CardTabButton value="settings" disabled>Settings</CardTabButton>
  * </CardTabContainer>
  * ```
  */

package/dist/components/cardTab/cardTabContainer/index.d.ts

@@ -1,81 +1,39 @@
 import { HTMLAttributes, ReactNode } from "react";
 import "./styles.css";
 type CardTabContainerProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "children" | "ref" | "onChange"> & {
+    /** `CardTabButton` components to render as tabs. Required. */
     children: ReactNode;
+    /** Disables all tab buttons at once. @default false */
     disabled?: boolean;
+    /** Initially selected tab value. */
     defaultValue?: string;
+    /** Callback fired when the active tab changes, receiving the new value. */
     onChange?: (index: string) => void;
 };
 /**
- * CardTabContainer component - used as a wrapper for CardTabButton components to create tabbed navigation
+ * CardTabContainer — wrapper that manages active state for a group of `CardTabButton` components.
  *
- * @param props - CardTabContainer component properties
- * @param props.children - CardTabButton components and other content (required)
- * @param props.disabled - Whether all tab buttons are disabled. Default: false
- * @param props.defaultValue - Initial tab value to be selected
- * @param props.onChange - Callback function called when tab changes, receives the tab value
+ * Renders as a `<nav>` element. Provides context consumed by each `CardTabButton`.
  *
- * **...Other valid HTML nav properties except onClick, children, and ref**
+ * @param props.children - `CardTabButton` elements. Required.
+ * @param props.defaultValue - Initially selected tab value.
+ * @param props.disabled - Disables all buttons. Default: false
+ * @param props.onChange - Called with the new value whenever the active tab changes.
  *
- * @returns CardTabContainer JSX element
+ * **...Other valid HTML `<nav>` properties**
  *
- * @example
- * ```tsx
- * // Basic tab container
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
+ * @returns CardTabContainer JSX element.
  *
  * @example
  * ```tsx
- * // Tab container with default value and change handler
- * <CardTabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <CardTabButton value="dashboard">Dashboard</CardTabButton>
+ * <CardTabContainer defaultValue="overview" onChange={setActiveTab}>
+ *   <CardTabButton value="overview">Overview</CardTabButton>
  *   <CardTabButton value="analytics">Analytics</CardTabButton>
  *   <CardTabButton value="settings">Settings</CardTabButton>
  * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <CardTabContainer disabled>
- *   <CardTabButton value="tab1">Tab 1</CardTabButton>
- *   <CardTabButton value="tab2">Tab 2</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <CardTabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <CardTabButton value="profile">Profile</CardTabButton>
- *         <CardTabButton value="account">Account</CardTabButton>
- *         <CardTabButton value="notifications">Notifications</CardTabButton>
- *       </CardTabContainer>
  *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
+ * {activeTab === 'overview' && <OverviewPanel />}
+ * {activeTab === 'analytics' && <AnalyticsPanel />}
  * ```
  */
 declare function CardTabContainer(props: CardTabContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/cardTab/cardTabContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cardTab/cardTabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,UAAU,CAC5C,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA8BrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cardTab/cardTabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,UAAU,CAC5C,GAAG;IACF,8DAA8D;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA8BrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/cardTab/cardTabContainer/index.js

@@ -3,75 +3,29 @@ import { useState } from "react";
 import { CardTabProvider } from "../cardTabContext";
 import "./styles.css";
 /**
- * CardTabContainer component - used as a wrapper for CardTabButton components to create tabbed navigation
+ * CardTabContainer — wrapper that manages active state for a group of `CardTabButton` components.
  *
- * @param props - CardTabContainer component properties
- * @param props.children - CardTabButton components and other content (required)
- * @param props.disabled - Whether all tab buttons are disabled. Default: false
- * @param props.defaultValue - Initial tab value to be selected
- * @param props.onChange - Callback function called when tab changes, receives the tab value
+ * Renders as a `<nav>` element. Provides context consumed by each `CardTabButton`.
  *
- * **...Other valid HTML nav properties except onClick, children, and ref**
+ * @param props.children - `CardTabButton` elements. Required.
+ * @param props.defaultValue - Initially selected tab value.
+ * @param props.disabled - Disables all buttons. Default: false
+ * @param props.onChange - Called with the new value whenever the active tab changes.
  *
- * @returns CardTabContainer JSX element
+ * **...Other valid HTML `<nav>` properties**
  *
- * @example
- * ```tsx
- * // Basic tab container
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
+ * @returns CardTabContainer JSX element.
  *
  * @example
  * ```tsx
- * // Tab container with default value and change handler
- * <CardTabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <CardTabButton value="dashboard">Dashboard</CardTabButton>
+ * <CardTabContainer defaultValue="overview" onChange={setActiveTab}>
+ *   <CardTabButton value="overview">Overview</CardTabButton>
  *   <CardTabButton value="analytics">Analytics</CardTabButton>
  *   <CardTabButton value="settings">Settings</CardTabButton>
  * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <CardTabContainer disabled>
- *   <CardTabButton value="tab1">Tab 1</CardTabButton>
- *   <CardTabButton value="tab2">Tab 2</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <CardTabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <CardTabButton value="profile">Profile</CardTabButton>
- *         <CardTabButton value="account">Account</CardTabButton>
- *         <CardTabButton value="notifications">Notifications</CardTabButton>
- *       </CardTabContainer>
  *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
+ * {activeTab === 'overview' && <OverviewPanel />}
+ * {activeTab === 'analytics' && <AnalyticsPanel />}
  * ```
  */
 function CardTabContainer(props) {

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

@@ -1,44 +1,63 @@
 import { ButtonHTMLAttributes } from "react";
 import "./styles.css";
 type CheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "prefix" | "type" | "name" | "defaultValue" | "value" | "onChange" | "onSelect" | "onClick"> & {
+    /** Optional label text displayed beside the checkbox. */
     label?: string;
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
     unShowFieldTemplate?: boolean;
+    /** Validation error message displayed below the checkbox. */
     errorMessage?: string;
+    /**
+     * Checkbox size.
+     * @default "md"
+     */
     size?: "md" | "lg" | "sm";
+    /** Field name for form submission. Required. */
     name: string;
+    /** Value stored in the hidden input when checked. @default "checked" */
     value?: string;
+    /** Controlled checked state. */
     checked?: boolean;
+    /** Uncontrolled initial checked state. @default false */
     defaultChecked?: boolean;
+    /** Callback fired on toggle — receives the value string (or `""` when unchecked). */
     onCheck?: (value: string) => void;
+    /**
+     * Layout direction forwarded to `FieldTemplate`.
+     * @default "horizontalReverse"
+     */
     orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
- * Checkbox component - used for creating interactive checkbox inputs with customizable styling and validation
+ * Checkbox — interactive checkbox input with label, validation, and form integration.
  *
- * @param props - Checkbox component properties
- * @param props.name - Required field name for form handling and hidden input identification
- * @param props.label - Optional label text to display next to the checkbox
- * @param props.errorMessage - Error state indicator to display validation errors
- * @param props.size - Size variant of the checkbox. Default: "md"
- * @param props.value - Optional value to be used when checkbox is checked. Default: "checked"
- * @param props.checked - Controlled checked state of the checkbox
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.onCheck - Callback function called when checkbox state changes, receives the value or empty string
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ * Stores value in a hidden `<input>` for native form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * **...Other valid HTML properties for button element (except type, name, defaultValue, value, onChange, onSelect, onClick)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed beside the checkbox.
+ * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: "md"
+ * @param props.value - Value stored when checked. Default: "checked"
+ * @param props.checked - Controlled checked state.
+ * @param props.defaultChecked - Uncontrolled initial checked state. Default: false
+ * @param props.onCheck - Callback fired on toggle — receives value or `""` when unchecked.
+ * @param props.errorMessage - Validation error message.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontalReverse"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
  *
- * @returns Checkbox JSX element wrapped in FieldWrapper with optional label and error
+ * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**
+ *
+ * @returns Checkbox JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic checkbox
+ * // Basic
  * <Checkbox name="terms" label="I agree to the terms and conditions" />
  *
- * // Checkbox with custom value and validation
+ * // With custom value and error
  * <Checkbox
  *   name="newsletter"
  *   label="Subscribe to newsletter"
@@ -46,31 +65,13 @@ type CheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "pre
  *   errorMessage={errors.newsletter}
  * />
  *
- * // Large checkbox with controlled state
+ * // Controlled
  * <Checkbox
  *   name="premium"
  *   label="Enable premium features"
  *   size="lg"
  *   checked={isPremium}
- *   onCheck={(value) => setIsPremium(!!value)}
- * />
- *
- * // Small checkbox with default checked state
- * <Checkbox
- *   name="remember"
- *   label="Remember me"
- *   size="sm"
- *   defaultChecked={true}
- *   value="remember_user"
- * />
- *
- * // Checkbox with custom styling and callback
- * <Checkbox
- *   name="notifications"
- *   label="Enable notifications"
- *   className="custom-checkbox"
- *   onCheck={(value) => console.log('Notification setting:', value)}
- *   disabled={isLoading}
+ *   onCheck={(v) => setIsPremium(!!v)}
  * />
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAA2B,MAAM,OAAO,CAAC;AAKtE,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAsErC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAA2B,MAAM,OAAO,CAAC;AAKtE,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CACZ,GAAG;IACF,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAsErC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox/index.js

@@ -5,31 +5,33 @@ import { useForm } from "../../hooks/useForm";
 import { FieldTemplate } from "../../services/fieldTemplate";
 import "./styles.css";
 /**
- * Checkbox component - used for creating interactive checkbox inputs with customizable styling and validation
+ * Checkbox — interactive checkbox input with label, validation, and form integration.
  *
- * @param props - Checkbox component properties
- * @param props.name - Required field name for form handling and hidden input identification
- * @param props.label - Optional label text to display next to the checkbox
- * @param props.errorMessage - Error state indicator to display validation errors
- * @param props.size - Size variant of the checkbox. Default: "md"
- * @param props.value - Optional value to be used when checkbox is checked. Default: "checked"
- * @param props.checked - Controlled checked state of the checkbox
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.onCheck - Callback function called when checkbox state changes, receives the value or empty string
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.unShowFieldTemplate - When true, skips `FieldTemplate` structure (wrapper, label and error text) and renders only the checkbox button content.
- * @param props.orientation - Layout direction forwarded to `FieldTemplate`/`FieldWrapper` (`horizontal`, `vertical`, `horizontalReverse`). Default: "horizontalReverse"
+ * Stores value in a hidden `<input>` for native form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * **...Other valid HTML properties for button element (except type, name, defaultValue, value, onChange, onSelect, onClick)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed beside the checkbox.
+ * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: "md"
+ * @param props.value - Value stored when checked. Default: "checked"
+ * @param props.checked - Controlled checked state.
+ * @param props.defaultChecked - Uncontrolled initial checked state. Default: false
+ * @param props.onCheck - Callback fired on toggle — receives value or `""` when unchecked.
+ * @param props.errorMessage - Validation error message.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontalReverse"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
  *
- * @returns Checkbox JSX element wrapped in FieldWrapper with optional label and error
+ * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**
+ *
+ * @returns Checkbox JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic checkbox
+ * // Basic
  * <Checkbox name="terms" label="I agree to the terms and conditions" />
  *
- * // Checkbox with custom value and validation
+ * // With custom value and error
  * <Checkbox
  *   name="newsletter"
  *   label="Subscribe to newsletter"
@@ -37,31 +39,13 @@ import "./styles.css";
  *   errorMessage={errors.newsletter}
  * />
  *
- * // Large checkbox with controlled state
+ * // Controlled
  * <Checkbox
  *   name="premium"
  *   label="Enable premium features"
  *   size="lg"
  *   checked={isPremium}
- *   onCheck={(value) => setIsPremium(!!value)}
- * />
- *
- * // Small checkbox with default checked state
- * <Checkbox
- *   name="remember"
- *   label="Remember me"
- *   size="sm"
- *   defaultChecked={true}
- *   value="remember_user"
- * />
- *
- * // Checkbox with custom styling and callback
- * <Checkbox
- *   name="notifications"
- *   label="Enable notifications"
- *   className="custom-checkbox"
- *   onCheck={(value) => console.log('Notification setting:', value)}
- *   disabled={isLoading}
+ *   onCheck={(v) => setIsPremium(!!v)}
  * />
  * ```
  */