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

package/dist/components/table/tableFooter/index.d.ts

@@ -2,42 +2,18 @@ import { HTMLAttributes } from "react";
 import "./styles.css";
 type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
 /**
- * TableFooter component - used to render the footer section of a table with content container
+ * TableFooter — `<tfoot>` section with an automatic spacing row above the content.
  *
- * @param props - TableFooter component properties
+ * Children span all columns via `colSpan={100}`. Commonly used for `Pagination`.
+ * Accepts all standard HTML `<tfoot>` attributes.
  *
- * **...All valid HTML properties for tfoot element**
- *
- * @returns TableFooter JSX element
+ * @returns TableFooter JSX element.
  *
  * @example
  * ```tsx
- * // Basic table footer with pagination
  * <TableFooter>
- *   <div>Showing 1-10 of 100 results</div>
- *   <Pagination />
- * </TableFooter>
- *
- * // Table footer with custom styling
- * <TableFooter className="custom-footer">
- *   <Button>Load More</Button>
+ *   <Pagination currentPage={page} totalPages={totalPages} onChange={setPage} />
  * </TableFooter>
- *
- * // Complete table usage
- * <TableContainer>
- *   <TableHeader>
- *     <th>Name</th>
- *     <th>Email</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- *   <TableFooter>
- *     <div className="pagination-info">
- *       Total: 250 items
- *     </div>
- *   </TableFooter>
- * </TableContainer>
  * ```
  */
 declare function TableFooter(props: TableFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/table/tableFooter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAc3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;GAcG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAc3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/table/tableFooter/index.js

@@ -1,42 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./styles.css";
 /**
- * TableFooter component - used to render the footer section of a table with content container
+ * TableFooter — `<tfoot>` section with an automatic spacing row above the content.
  *
- * @param props - TableFooter component properties
+ * Children span all columns via `colSpan={100}`. Commonly used for `Pagination`.
+ * Accepts all standard HTML `<tfoot>` attributes.
  *
- * **...All valid HTML properties for tfoot element**
- *
- * @returns TableFooter JSX element
+ * @returns TableFooter JSX element.
  *
  * @example
  * ```tsx
- * // Basic table footer with pagination
  * <TableFooter>
- *   <div>Showing 1-10 of 100 results</div>
- *   <Pagination />
- * </TableFooter>
- *
- * // Table footer with custom styling
- * <TableFooter className="custom-footer">
- *   <Button>Load More</Button>
+ *   <Pagination currentPage={page} totalPages={totalPages} onChange={setPage} />
  * </TableFooter>
- *
- * // Complete table usage
- * <TableContainer>
- *   <TableHeader>
- *     <th>Name</th>
- *     <th>Email</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- *   <TableFooter>
- *     <div className="pagination-info">
- *       Total: 250 items
- *     </div>
- *   </TableFooter>
- * </TableContainer>
  * ```
  */
 function TableFooter(props) {

package/dist/components/table/tableHeader/index.d.ts

@@ -2,41 +2,20 @@ import { HTMLAttributes } from "react";
 import "./styles.css";
 type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
 /**
- * TableHeader component - used to render the header section of a table with automatic spacing
+ * TableHeader — `<thead>` section with an automatic spacing row below the header row.
  *
- * @param props - TableHeader component properties
+ * Pass `<th>` elements as children — they are wrapped in a `<tr>` automatically.
+ * Accepts all standard HTML `<thead>` attributes.
  *
- * **...All valid HTML properties for thead element**
- *
- * @returns TableHeader JSX element
+ * @returns TableHeader JSX element.
  *
  * @example
  * ```tsx
- * // Basic table header
  * <TableHeader>
  *   <th>Name</th>
  *   <th>Email</th>
  *   <th>Actions</th>
  * </TableHeader>
- *
- * // Table header with custom styling
- * <TableHeader className="custom-header">
- *   <th>Product</th>
- *   <th>Price</th>
- *   <th>Stock</th>
- * </TableHeader>
- *
- * // Complete table usage
- * <TableContainer>
- *   <TableHeader>
- *     <th>ID</th>
- *     <th>User</th>
- *     <th>Status</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- * </TableContainer>
  * ```
  */
 declare function TableHeader(props: TableHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/table/tableHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAU3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAU3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/table/tableHeader/index.js

@@ -1,41 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./styles.css";
 /**
- * TableHeader component - used to render the header section of a table with automatic spacing
+ * TableHeader — `<thead>` section with an automatic spacing row below the header row.
  *
- * @param props - TableHeader component properties
+ * Pass `<th>` elements as children — they are wrapped in a `<tr>` automatically.
+ * Accepts all standard HTML `<thead>` attributes.
  *
- * **...All valid HTML properties for thead element**
- *
- * @returns TableHeader JSX element
+ * @returns TableHeader JSX element.
  *
  * @example
  * ```tsx
- * // Basic table header
  * <TableHeader>
  *   <th>Name</th>
  *   <th>Email</th>
  *   <th>Actions</th>
  * </TableHeader>
- *
- * // Table header with custom styling
- * <TableHeader className="custom-header">
- *   <th>Product</th>
- *   <th>Price</th>
- *   <th>Stock</th>
- * </TableHeader>
- *
- * // Complete table usage
- * <TableContainer>
- *   <TableHeader>
- *     <th>ID</th>
- *     <th>User</th>
- *     <th>Status</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- * </TableContainer>
  * ```
  */
 function TableHeader(props) {

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

@@ -1,36 +1,53 @@
 import { TextareaHTMLAttributes } from "react";
 import "./styles.css";
 type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "value" | "defaultValue"> & {
+    /** Field name for form submission. Required. */
     name: string;
+    /** Optional label text displayed above the textarea. */
     label?: string;
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** Validation error message displayed below the textarea. */
     errorMessage?: string;
+    /**
+     * Textarea size.
+     * @default "md"
+     */
     size?: "md" | "lg";
+    /**
+     * Visual style variant.
+     * - `solid`: filled background.
+     * - `outline`: bordered, transparent background.
+     * @default "solid"
+     */
     variant?: "solid" | "outline";
+    /** Controlled value. */
     value?: string;
+    /** Uncontrolled default value. */
     defaultValue?: string;
 };
 /**
- * Textarea component - used for multi-line text input with customizable styling and validation
+ * Textarea — multi-line text input with label, validation, and form integration.
  *
- * @param props - Textarea component properties
- * @param props.name - Required field name for form handling and textarea identification
- * @param props.label - Optional label text to display above the textarea
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the textarea
- * @param props.size - Size variant of the textarea. Default: "md"
- * @param props.variant - Visual variant of the textarea. Default: "solid"
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * **...Other valid HTML properties for textarea element (except name)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed above the textarea.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.errorMessage - Validation error message.
+ * @param props.size - Textarea size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
  *
- * @returns Textarea JSX element wrapped in FieldWrapper with optional label and error message
+ * **...Other valid HTML properties for `<textarea>`**
+ *
+ * @returns Textarea JSX element wrapped in `FieldWrapper`.
  *
  * @example
  * ```tsx
- * // Basic textarea
+ * // Basic
  * <Textarea name="description" placeholder="Enter description..." />
  *
- * // Textarea with label and validation
+ * // With label and validation
  * <Textarea
  *   name="bio"
  *   label="Biography"
@@ -39,64 +56,15 @@ type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" |
  *   errorMessage="Biography is required"
  * />
  *
- * // Large textarea with outline variant
- * <Textarea
- *   name="comments"
- *   label="Comments"
- *   size="lg"
- *   variant="outline"
- *   placeholder="Enter your comments here..."
- *   rows={6}
- * />
- *
- * // Textarea with character limit and custom styling
- * <Textarea
- *   name="feedback"
- *   label="Feedback"
- *   placeholder="Share your feedback (max 500 characters)"
- *   maxLength={500}
- *   rows={4}
- *   className="feedback-textarea"
- * />
- *
- * // Read-only textarea for display
- * <Textarea
- *   name="terms"
- *   label="Terms and Conditions"
- *   value={termsContent}
- *   readOnly
- *   rows={10}
- *   variant="outline"
- * />
- *
- * // Disabled textarea
- * <Textarea
- *   name="disabled_field"
- *   label="Disabled Field"
- *   value="This field is disabled"
- *   disabled
- *   placeholder="Cannot edit this field"
- * />
- *
- * // Textarea with controlled value and change handler
+ * // Controlled with custom rows
  * <Textarea
  *   name="message"
  *   label="Message"
  *   value={message}
  *   onChange={(e) => setMessage(e.target.value)}
- *   placeholder="Type your message..."
  *   rows={5}
- *   showAsterisk
- * />
- *
- * // Textarea with resize control
- * <Textarea
- *   name="notes"
- *   label="Notes"
- *   placeholder="Enter your notes..."
- *   style={{ resize: 'vertical' }}
- *   rows={3}
- *   cols={50}
+ *   size="lg"
+ *   variant="outline"
  * />
  * ```
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAOf,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,GAAG,OAAO,GAAG,cAAc,CAClC,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAmFrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAOf,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,GAAG,OAAO,GAAG,cAAc,CAClC,GAAG;IACF,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAmFrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/textarea/index.js

@@ -6,26 +6,27 @@ import { FieldWrapper } from "../fieldWrapper";
 import { FieldError } from "../fieldError";
 import "./styles.css";
 /**
- * Textarea component - used for multi-line text input with customizable styling and validation
+ * Textarea — multi-line text input with label, validation, and form integration.
  *
- * @param props - Textarea component properties
- * @param props.name - Required field name for form handling and textarea identification
- * @param props.label - Optional label text to display above the textarea
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the textarea
- * @param props.size - Size variant of the textarea. Default: "md"
- * @param props.variant - Visual variant of the textarea. Default: "solid"
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * **...Other valid HTML properties for textarea element (except name)**
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed above the textarea.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.errorMessage - Validation error message.
+ * @param props.size - Textarea size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
  *
- * @returns Textarea JSX element wrapped in FieldWrapper with optional label and error message
+ * **...Other valid HTML properties for `<textarea>`**
+ *
+ * @returns Textarea JSX element wrapped in `FieldWrapper`.
  *
  * @example
  * ```tsx
- * // Basic textarea
+ * // Basic
  * <Textarea name="description" placeholder="Enter description..." />
  *
- * // Textarea with label and validation
+ * // With label and validation
  * <Textarea
  *   name="bio"
  *   label="Biography"
@@ -34,64 +35,15 @@ import "./styles.css";
  *   errorMessage="Biography is required"
  * />
  *
- * // Large textarea with outline variant
- * <Textarea
- *   name="comments"
- *   label="Comments"
- *   size="lg"
- *   variant="outline"
- *   placeholder="Enter your comments here..."
- *   rows={6}
- * />
- *
- * // Textarea with character limit and custom styling
- * <Textarea
- *   name="feedback"
- *   label="Feedback"
- *   placeholder="Share your feedback (max 500 characters)"
- *   maxLength={500}
- *   rows={4}
- *   className="feedback-textarea"
- * />
- *
- * // Read-only textarea for display
- * <Textarea
- *   name="terms"
- *   label="Terms and Conditions"
- *   value={termsContent}
- *   readOnly
- *   rows={10}
- *   variant="outline"
- * />
- *
- * // Disabled textarea
- * <Textarea
- *   name="disabled_field"
- *   label="Disabled Field"
- *   value="This field is disabled"
- *   disabled
- *   placeholder="Cannot edit this field"
- * />
- *
- * // Textarea with controlled value and change handler
+ * // Controlled with custom rows
  * <Textarea
  *   name="message"
  *   label="Message"
  *   value={message}
  *   onChange={(e) => setMessage(e.target.value)}
- *   placeholder="Type your message..."
  *   rows={5}
- *   showAsterisk
- * />
- *
- * // Textarea with resize control
- * <Textarea
- *   name="notes"
- *   label="Notes"
- *   placeholder="Enter your notes..."
- *   style={{ resize: 'vertical' }}
- *   rows={3}
- *   cols={50}
+ *   size="lg"
+ *   variant="outline"
  * />
  * ```
  */

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

@@ -1,78 +1,50 @@
 import { HTMLAttributes, ReactNode } from "react";
 import "./styles.css";
 type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Text rendered inside the tooltip bubble. Supports inline HTML. Required. */
     text: string;
+    /** Element that triggers the tooltip on hover. Required. */
     children: ReactNode;
+    /**
+     * Preferred position of the tooltip relative to the trigger element.
+     * Automatically flips to the opposite side if the tooltip would overflow the viewport.
+     * @default "top"
+     */
     orientation?: "top" | "right" | "bottom" | "left";
+    /**
+     * Tooltip size.
+     * @default "lg"
+     */
     size?: "md" | "lg";
 };
 /**
- * Tooltip component - displays contextual information on hover with smart positioning
+ * Tooltip — shows a contextual text bubble on hover with smart viewport-aware positioning.
  *
- * @param props - Tooltip component properties
- * @param props.text - Text content to display in the tooltip
- * @param props.children - Element that triggers the tooltip on hover
- * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
- * @param props.size - Tooltip size variant. Default: "lg"
+ * The tooltip automatically flips to the opposite side when it would overflow the viewport.
  *
- * **...Other valid HTML properties for div element**
+ * @param props.text - Text (or HTML) to display in the tooltip. Required.
+ * @param props.children - Trigger element. Required.
+ * @param props.orientation - Preferred position relative to the trigger. Default: "top"
+ * @param props.size - Tooltip size. Default: "lg"
  *
- * @returns Tooltip JSX element
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns Tooltip JSX element.
  *
  * @example
  * ```tsx
- * // Basic tooltip
- * <Tooltip text="This is a helpful tip">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * // Tooltip with different orientations
- * <Tooltip text="Left tooltip" orientation="left">
- *   <span>Hover for left tooltip</span>
- * </Tooltip>
- *
- * <Tooltip text="Right tooltip" orientation="right">
- *   <span>Hover for right tooltip</span>
- * </Tooltip>
- *
- * // Different sizes
- * <Tooltip text="Small tooltip" size="md">
- *   <button>Small tooltip</button>
- * </Tooltip>
- *
- * <Tooltip text="Large tooltip" size="lg">
- *   <button>Large tooltip</button>
+ * <Tooltip text="Save changes before leaving">
+ *   <IconButton icon={SaveIcon} aria-label="Save" />
  * </Tooltip>
  *
- * // Smart positioning - automatically adjusts if doesn't fit
- * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
- *   <button className="near-edge">Smart positioning</button>
+ * // Toolbar with bottom-oriented tooltips
+ * <Tooltip text="Add item" orientation="bottom">
+ *   <IconButton icon={Plus} aria-label="Add" />
  * </Tooltip>
  *
- * // Complete example with custom styling
- * <Tooltip
- *   text="Save your changes before proceeding"
- *   orientation="bottom"
- *   size="lg"
- *   className="custom-tooltip"
- * >
- *   <IconButton icon={SaveIcon} />
+ * <Tooltip text="Delete" orientation="bottom" size="md">
+ *   <IconButton icon={Trash2} aria-label="Delete" scheme="danger" />
  * </Tooltip>
- *
- * // Multiple tooltips on same page
- * <div className="toolbar">
- *   <Tooltip text="Create new file" orientation="bottom">
- *     <IconButton icon={PlusIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Open existing file" orientation="bottom">
- *     <IconButton icon={FolderIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Delete selected file" orientation="bottom">
- *     <IconButton icon={TrashIcon} />
- *   </Tooltip>
- * </div>
  * ```
  */
 declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAqFnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAqFnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/tooltip/index.js

@@ -2,72 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState, } from "react";
 import "./styles.css";
 /**
- * Tooltip component - displays contextual information on hover with smart positioning
+ * Tooltip — shows a contextual text bubble on hover with smart viewport-aware positioning.
  *
- * @param props - Tooltip component properties
- * @param props.text - Text content to display in the tooltip
- * @param props.children - Element that triggers the tooltip on hover
- * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
- * @param props.size - Tooltip size variant. Default: "lg"
+ * The tooltip automatically flips to the opposite side when it would overflow the viewport.
  *
- * **...Other valid HTML properties for div element**
+ * @param props.text - Text (or HTML) to display in the tooltip. Required.
+ * @param props.children - Trigger element. Required.
+ * @param props.orientation - Preferred position relative to the trigger. Default: "top"
+ * @param props.size - Tooltip size. Default: "lg"
  *
- * @returns Tooltip JSX element
+ * **...Other valid HTML properties for `<div>`**
+ *
+ * @returns Tooltip JSX element.
  *
  * @example
  * ```tsx
- * // Basic tooltip
- * <Tooltip text="This is a helpful tip">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * // Tooltip with different orientations
- * <Tooltip text="Left tooltip" orientation="left">
- *   <span>Hover for left tooltip</span>
- * </Tooltip>
- *
- * <Tooltip text="Right tooltip" orientation="right">
- *   <span>Hover for right tooltip</span>
- * </Tooltip>
- *
- * // Different sizes
- * <Tooltip text="Small tooltip" size="md">
- *   <button>Small tooltip</button>
- * </Tooltip>
- *
- * <Tooltip text="Large tooltip" size="lg">
- *   <button>Large tooltip</button>
+ * <Tooltip text="Save changes before leaving">
+ *   <IconButton icon={SaveIcon} aria-label="Save" />
  * </Tooltip>
  *
- * // Smart positioning - automatically adjusts if doesn't fit
- * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
- *   <button className="near-edge">Smart positioning</button>
+ * // Toolbar with bottom-oriented tooltips
+ * <Tooltip text="Add item" orientation="bottom">
+ *   <IconButton icon={Plus} aria-label="Add" />
  * </Tooltip>
  *
- * // Complete example with custom styling
- * <Tooltip
- *   text="Save your changes before proceeding"
- *   orientation="bottom"
- *   size="lg"
- *   className="custom-tooltip"
- * >
- *   <IconButton icon={SaveIcon} />
+ * <Tooltip text="Delete" orientation="bottom" size="md">
+ *   <IconButton icon={Trash2} aria-label="Delete" scheme="danger" />
  * </Tooltip>
- *
- * // Multiple tooltips on same page
- * <div className="toolbar">
- *   <Tooltip text="Create new file" orientation="bottom">
- *     <IconButton icon={PlusIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Open existing file" orientation="bottom">
- *     <IconButton icon={FolderIcon} />
- *   </Tooltip>
- *
- *   <Tooltip text="Delete selected file" orientation="bottom">
- *     <IconButton icon={TrashIcon} />
- *   </Tooltip>
- * </div>
  * ```
  */
 function Tooltip(props) {