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

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

@@ -1,55 +1,41 @@
 import { HTMLAttributes } from "react";
 import "./styles.css";
 type SliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /** Current slider position as a percentage (0–100). Required. */
     value: number;
+    /** Callback fired whenever the value changes. Required. */
     onChange: (value: number) => void;
+    /** Disables all drag and click interactions. @default false */
     disabled?: boolean;
-    onDragging?: (value: boolean) => void;
+    /** Callback fired when the dragging state changes (`true` = drag started, `false` = drag ended). */
+    onDragging?: (isDragging: boolean) => void;
 };
 /**
- * Slider component - interactive range input for selecting numeric values
+ * Slider — interactive track for selecting a numeric value between 0 and 100.
  *
- * @param props - Slider component properties
- * @param props.value - Current slider value (0-100)
- * @param props.onChange - Callback function called when value changes
- * @param props.disabled - Disables slider interaction. Default: false
- * @param props.onDragging - Callback function called when dragging state changes
+ * Pair with `useSlider` for managed state.
  *
- * **...Other valid HTML properties for div element**
+ * @param props.value - Current position as a percentage (0–100). Required.
+ * @param props.onChange - Callback fired on value change. Required.
+ * @param props.disabled - Disables interactions. Default: false
+ * @param props.onDragging - Callback fired when dragging starts or stops.
  *
- * @returns Slider JSX element
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns Slider JSX element.
  *
  * @example
  * ```tsx
- * // Basic slider
+ * // Controlled slider
  * const [value, setValue] = useState(50);
  * <Slider value={value} onChange={setValue} />
  *
- * // Disabled slider
- * <Slider value={75} onChange={() => {}} disabled />
- *
- * // Slider with dragging callback
- * const [isDragging, setIsDragging] = useState(false);
- * <Slider
- *   value={value}
- *   onChange={setValue}
- *   onDragging={setIsDragging}
- * />
+ * // With useSlider hook
+ * const [value, setValue] = useSlider(25);
+ * <Slider value={value} onChange={setValue} onDragging={setIsDragging} />
  *
- * // Complete example with useSlider hook
- * function SliderExample() {
- *   const [sliderValue, setSliderValue] = useSlider(25);
- *   const [isDragging, setIsDragging] = useState(false);
- *
- *   return (
- *     <Slider
- *       value={sliderValue}
- *       onChange={setSliderValue}
- *       onDragging={setIsDragging}
- *       className="custom-slider"
- *     />
- *   );
- * }
+ * // Disabled
+ * <Slider value={75} onChange={() => {}} disabled />
  * ```
  */
 declare function Slider(props: SliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuEjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpE,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oGAAoG;IACpG,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuEjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/slider/index.js

@@ -2,49 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import "./styles.css";
 /**
- * Slider component - interactive range input for selecting numeric values
+ * Slider — interactive track for selecting a numeric value between 0 and 100.
  *
- * @param props - Slider component properties
- * @param props.value - Current slider value (0-100)
- * @param props.onChange - Callback function called when value changes
- * @param props.disabled - Disables slider interaction. Default: false
- * @param props.onDragging - Callback function called when dragging state changes
+ * Pair with `useSlider` for managed state.
  *
- * **...Other valid HTML properties for div element**
+ * @param props.value - Current position as a percentage (0–100). Required.
+ * @param props.onChange - Callback fired on value change. Required.
+ * @param props.disabled - Disables interactions. Default: false
+ * @param props.onDragging - Callback fired when dragging starts or stops.
  *
- * @returns Slider JSX element
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns Slider JSX element.
  *
  * @example
  * ```tsx
- * // Basic slider
+ * // Controlled slider
  * const [value, setValue] = useState(50);
  * <Slider value={value} onChange={setValue} />
  *
- * // Disabled slider
- * <Slider value={75} onChange={() => {}} disabled />
- *
- * // Slider with dragging callback
- * const [isDragging, setIsDragging] = useState(false);
- * <Slider
- *   value={value}
- *   onChange={setValue}
- *   onDragging={setIsDragging}
- * />
+ * // With useSlider hook
+ * const [value, setValue] = useSlider(25);
+ * <Slider value={value} onChange={setValue} onDragging={setIsDragging} />
  *
- * // Complete example with useSlider hook
- * function SliderExample() {
- *   const [sliderValue, setSliderValue] = useSlider(25);
- *   const [isDragging, setIsDragging] = useState(false);
- *
- *   return (
- *     <Slider
- *       value={sliderValue}
- *       onChange={setSliderValue}
- *       onDragging={setIsDragging}
- *       className="custom-slider"
- *     />
- *   );
- * }
+ * // Disabled
+ * <Slider value={75} onChange={() => {}} disabled />
  * ```
  */
 function Slider(props) {

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

@@ -1,98 +1,82 @@
 import type { ButtonHTMLAttributes } from "react";
 import "./styles.css";
 type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onChange" | "defaultValue" | "onCheck" | "value"> & {
+    /** Optional label text displayed beside the switch. */
     label?: string;
+    /**
+     * Switch size.
+     * @default "lg"
+     */
     size?: "sm" | "md" | "lg";
+    /** Uncontrolled initial checked state. @default false */
     defaultChecked?: boolean;
+    /** Controlled checked state. */
     checked?: boolean;
+    /** Value emitted when the switch is on. @default "checked" */
     value?: string;
+    /** Value emitted when the switch is off. @default "" */
     unCheckedValue?: string;
+    /** Field name for form submission. Required. */
     name: string;
+    /** Callback fired on toggle — receives the current value string. */
     onCheck?: (value: string) => void;
+    /**
+     * Layout direction forwarded to `FieldTemplate`.
+     * @default "horizontalReverse"
+     */
     orientation?: "vertical" | "horizontal" | "horizontalReverse";
+    /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
     unShowFieldTemplate?: boolean;
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** Validation error message displayed below the switch. */
     errorMessage?: string;
 };
 /**
- * Switch component - used for creating toggle switches with on/off states
+ * Switch — toggle input for binary on/off states.
  *
- * @param props - Switch component properties
- * @param props.name - Required field name for form handling and input identification
- * @param props.label - Optional label text to display next to the switch
- * @param props.size - Size variant of the switch. Default: "lg"
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.checked - Controlled checked state of the switch
- * @param props.value - Value to be used when switch is checked. Default: "checked"
- * @param props.unCheckedValue - Value to be used when switch is unchecked. Default: ""
- * @param props.onCheck - Callback function called when switch state changes, receives the current value
- * @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 children, onChange, defaultValue, onCheck, value)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed beside the switch.
+ * @param props.size - Switch size (`sm` | `md` | `lg`). Default: "lg"
+ * @param props.defaultChecked - Uncontrolled initial checked state. Default: false
+ * @param props.checked - Controlled checked state.
+ * @param props.value - Value emitted when on. Default: "checked"
+ * @param props.unCheckedValue - Value emitted when off. Default: ""
+ * @param props.onCheck - Callback fired on toggle — receives the current value string.
+ * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontalReverse"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.errorMessage - Validation error message.
  *
- * @returns Switch JSX element wrapped in FieldWrapper with optional label
+ * **...Other valid HTML properties for `<button>` (except `children`, `onChange`, `defaultValue`)**
+ *
+ * @returns Switch JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic switch
+ * // Basic
  * <Switch name="notifications" label="Enable notifications" />
  *
- * // Switch with custom values
+ * // Custom on/off values
  * <Switch
  *   name="theme"
  *   label="Dark mode"
  *   value="dark"
  *   unCheckedValue="light"
- *   onCheck={(value) => console.log('Theme:', value)}
+ *   onCheck={(v) => setTheme(v)}
  * />
  *
- * // Controlled switch with callback
+ * // Controlled
  * <Switch
  *   name="autoSave"
- *   label="Auto-save documents"
+ *   label="Auto-save"
  *   checked={isAutoSaveEnabled}
- *   onCheck={(value) => setIsAutoSaveEnabled(!!value)}
+ *   onCheck={(v) => setAutoSave(!!v)}
  *   size="md"
  * />
- *
- * // Small switch with default checked state
- * <Switch
- *   name="marketing"
- *   label="Marketing emails"
- *   size="sm"
- *   defaultChecked={true}
- *   value="subscribed"
- *   unCheckedValue="unsubscribed"
- * />
- *
- * // Switch with custom styling and disabled state
- * <Switch
- *   name="premium"
- *   label="Premium features"
- *   className="premium-switch"
- *   disabled={!isPremiumUser}
- *   onCheck={(value) => handlePremiumToggle(value)}
- * />
- *
- * // Large switch for accessibility
- * <Switch
- *   name="accessibility"
- *   label="High contrast mode"
- *   size="lg"
- *   checked={isHighContrast}
- *   onCheck={(value) => setIsHighContrast(!!value)}
- *   value="enabled"
- *   unCheckedValue="disabled"
- * />
- *
- * // Switch without label for inline usage
- * <Switch
- *   name="inline_toggle"
- *   value="on"
- *   unCheckedValue="off"
- *   onCheck={(value) => console.log('Toggle state:', value)}
- * />
  * ```
  */
 declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,IAAI,CACrB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,GAAG,OAAO,CAC/D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,mBAAmB,CAAC;IAC9D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CA+DjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,IAAI,CACrB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,GAAG,OAAO,CAC/D,GAAG;IACF,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yDAAyD;IACzD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,mBAAmB,CAAC;IAC9D,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CA+DjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/switch/index.js

@@ -3,84 +3,50 @@ import { useId, useRef, useState } from "react";
 import { FieldTemplate } from "../../services/fieldTemplate";
 import "./styles.css";
 /**
- * Switch component - used for creating toggle switches with on/off states
+ * Switch — toggle input for binary on/off states.
  *
- * @param props - Switch component properties
- * @param props.name - Required field name for form handling and input identification
- * @param props.label - Optional label text to display next to the switch
- * @param props.size - Size variant of the switch. Default: "lg"
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.checked - Controlled checked state of the switch
- * @param props.value - Value to be used when switch is checked. Default: "checked"
- * @param props.unCheckedValue - Value to be used when switch is unchecked. Default: ""
- * @param props.onCheck - Callback function called when switch state changes, receives the current value
- * @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 children, onChange, defaultValue, onCheck, value)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed beside the switch.
+ * @param props.size - Switch size (`sm` | `md` | `lg`). Default: "lg"
+ * @param props.defaultChecked - Uncontrolled initial checked state. Default: false
+ * @param props.checked - Controlled checked state.
+ * @param props.value - Value emitted when on. Default: "checked"
+ * @param props.unCheckedValue - Value emitted when off. Default: ""
+ * @param props.onCheck - Callback fired on toggle — receives the current value string.
+ * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontalReverse"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.errorMessage - Validation error message.
  *
- * @returns Switch JSX element wrapped in FieldWrapper with optional label
+ * **...Other valid HTML properties for `<button>` (except `children`, `onChange`, `defaultValue`)**
+ *
+ * @returns Switch JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * // Basic switch
+ * // Basic
  * <Switch name="notifications" label="Enable notifications" />
  *
- * // Switch with custom values
+ * // Custom on/off values
  * <Switch
  *   name="theme"
  *   label="Dark mode"
  *   value="dark"
  *   unCheckedValue="light"
- *   onCheck={(value) => console.log('Theme:', value)}
+ *   onCheck={(v) => setTheme(v)}
  * />
  *
- * // Controlled switch with callback
+ * // Controlled
  * <Switch
  *   name="autoSave"
- *   label="Auto-save documents"
+ *   label="Auto-save"
  *   checked={isAutoSaveEnabled}
- *   onCheck={(value) => setIsAutoSaveEnabled(!!value)}
+ *   onCheck={(v) => setAutoSave(!!v)}
  *   size="md"
  * />
- *
- * // Small switch with default checked state
- * <Switch
- *   name="marketing"
- *   label="Marketing emails"
- *   size="sm"
- *   defaultChecked={true}
- *   value="subscribed"
- *   unCheckedValue="unsubscribed"
- * />
- *
- * // Switch with custom styling and disabled state
- * <Switch
- *   name="premium"
- *   label="Premium features"
- *   className="premium-switch"
- *   disabled={!isPremiumUser}
- *   onCheck={(value) => handlePremiumToggle(value)}
- * />
- *
- * // Large switch for accessibility
- * <Switch
- *   name="accessibility"
- *   label="High contrast mode"
- *   size="lg"
- *   checked={isHighContrast}
- *   onCheck={(value) => setIsHighContrast(!!value)}
- *   value="enabled"
- *   unCheckedValue="disabled"
- * />
- *
- * // Switch without label for inline usage
- * <Switch
- *   name="inline_toggle"
- *   value="on"
- *   unCheckedValue="off"
- *   onCheck={(value) => console.log('Toggle state:', value)}
- * />
  * ```
  */
 function Switch(props) {

package/dist/components/tab/tabButton/index.d.ts

@@ -1,69 +1,31 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import "./styles.css";
 type TabButtonProps = 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;
 };
 /**
- * TabButton component - used as interactive buttons within a TabContainer for tab navigation
+ * TabButton — individual tab button inside a `TabContainer`.
  *
- * @param props - TabButton 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 TabContainer's disabled state
+ * Reads active state and disabled state from `TabContainer` 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 TabButton JSX element
+ * **...Other valid HTML `<button>` properties except `type`**
  *
- * @example
- * ```tsx
- * // Basic tab buttons within TabContainer
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <TabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <TabContainer>
- *   <TabButton value="available">Available</TabButton>
- *   <TabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </TabButton>
- * </TabContainer>
- * ```
+ * @returns TabButton JSX element.
  *
  * @example
  * ```tsx
- * // Tab buttons with custom styling and default value
- * <TabContainer defaultValue="dashboard">
- *   <TabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="reports">Reports</TabButton>
+ * <TabContainer defaultValue="overview" onChange={setTab}>
+ *   <TabButton value="overview">Overview</TabButton>
+ *   <TabButton value="activity">Activity</TabButton>
+ *   <TabButton value="settings" disabled>Settings</TabButton>
  * </TabContainer>
  * ```
  */

package/dist/components/tab/tabButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,IAAI,CACxB,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,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkCvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,IAAI,CACxB,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,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkCvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/tab/tabButton/index.js

@@ -2,65 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTab } from "../tabContext";
 import "./styles.css";
 /**
- * TabButton component - used as interactive buttons within a TabContainer for tab navigation
+ * TabButton — individual tab button inside a `TabContainer`.
  *
- * @param props - TabButton 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 TabContainer's disabled state
+ * Reads active state and disabled state from `TabContainer` 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 TabButton JSX element
+ * **...Other valid HTML `<button>` properties except `type`**
  *
- * @example
- * ```tsx
- * // Basic tab buttons within TabContainer
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <TabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <TabContainer>
- *   <TabButton value="available">Available</TabButton>
- *   <TabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </TabButton>
- * </TabContainer>
- * ```
+ * @returns TabButton JSX element.
  *
  * @example
  * ```tsx
- * // Tab buttons with custom styling and default value
- * <TabContainer defaultValue="dashboard">
- *   <TabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="reports">Reports</TabButton>
+ * <TabContainer defaultValue="overview" onChange={setTab}>
+ *   <TabButton value="overview">Overview</TabButton>
+ *   <TabButton value="activity">Activity</TabButton>
+ *   <TabButton value="settings" disabled>Settings</TabButton>
  * </TabContainer>
  * ```
  */