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

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

@@ -1,69 +1,104 @@
 import { countries } from "@arkyn/templates";
 type PhoneInputProps = {
+    /** Optional HTML id for the visible phone text input. */
     id?: string;
+    /** Disables all interactions. @default false */
     disabled?: boolean;
+    /** Prevents value changes while keeping the current value visible. @default false */
     readOnly?: boolean;
+    /** Validation error message (overrides the `useForm` context error for this field). */
     errorMessage?: string;
+    /** Optional label text displayed above the input. */
     label?: string;
+    /** Displays an asterisk on the label to signal a required field. */
     showAsterisk?: boolean;
+    /** Shows a loading state and disables interactions. @default false */
     isLoading?: boolean;
+    /**
+     * Input size.
+     * @default "md"
+     */
     size?: "md" | "lg";
+    /**
+     * Visual style variant.
+     * - `solid`: filled background.
+     * - `outline`: bordered, transparent background.
+     * @default "solid"
+     */
     variant?: "solid" | "outline";
+    /** Additional CSS class applied to the field wrapper. */
     className?: string;
+    /** Uncontrolled default phone value (numeric string with or without country code). @default "" */
     defaultValue?: string;
+    /** Text displayed when no country matches the search query. @default "Nenhum país encontrado" */
     notFoundCountryText?: string;
+    /** Field name for form submission (stored as numeric string with country code). Required. */
     name: string;
+    /** Placeholder for the country search input. @default "Pesquisar país" */
     searchCountryPlaceholder?: string;
+    /** ISO 3166-1 alpha-2 code of the initially selected country. @default "BR" */
     defaultCountryIso?: (typeof countries)[number]["iso"];
+    /** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */
     onChange?: (e: string) => void;
+    /** Controlled phone value (without country code). */
     value?: string;
+    /** When true, skips `FieldTemplate` wrapper (label and error text). @default false */
     unShowFieldTemplate?: boolean;
+    /**
+     * Layout direction forwarded to `FieldTemplate`.
+     * @default "vertical"
+     */
     orientation?: "horizontal" | "vertical" | "horizontalReverse";
 };
 /**
- * Phone input with country selector, mask formatting, and hidden form value.
+ * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.
  *
- * The component formats the visible value according to the selected country mask,
- * while the hidden input stores a numeric string prefixed with the country code.
- * It also integrates with `useForm` to display validation errors by field name.
+ * The visible input is masked according to the selected country's phone format.
+ * The hidden `<input>` stores a numeric string prefixed with the country dial code for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @param {PhoneInputProps} props Component properties.
- * @param {string} props.name Hidden input name used in form submission.
- * @param {string} [props.label] Optional field label.
- * @param {boolean} [props.showAsterisk] Displays required marker in the label.
- * @param {string} [props.errorMessage] Custom error message (overrides form context error).
- * @param {"md" | "lg"} [props.size="md"] Visual size.
- * @param {"solid" | "outline"} [props.variant="solid"] Visual variant.
- * @param {boolean} [props.disabled=false] Disables interactions.
- * @param {boolean} [props.readOnly=false] Prevents editing while keeping value visible.
- * @param {boolean} [props.isLoading=false] Applies loading state and disables interactions.
- * @param {string} [props.defaultValue=""] Initial phone value for uncontrolled usage.
- * @param {string} [props.value] Controlled phone value.
- * @param {(value: string) => void} [props.onChange] Callback with numeric value including country code.
- * @param {(typeof countries)[number]["iso"]} [props.defaultCountryIso] Reserved prop for default country ISO.
- * @param {string} [props.searchCountryPlaceholder="Pesquisar país"] Placeholder for country search input.
- * @param {string} [props.notFoundCountryText="Nenhum país encontrado"] Text shown when no country matches search.
- * @param {string} [props.className] Class applied to the field wrapper.
- * @param {string} [props.id] Optional id for the visible phone input.
- * @param {boolean} [props.unShowFieldTemplate=false] When `true`, skips wrapper/label/error rendering from `FieldTemplate`.
- * @param {"horizontal" | "vertical" | "horizontalReverse"} [props.orientation="horizontal"] Layout direction forwarded to `FieldTemplate`/`FieldWrapper`.
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed above the input.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.errorMessage - Validation error message.
+ * @param props.size - Input size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.disabled - Disables all interactions. Default: false
+ * @param props.readOnly - Prevents editing. Default: false
+ * @param props.isLoading - Shows loading state and disables interactions. Default: false
+ * @param props.defaultValue - Uncontrolled default phone value.
+ * @param props.value - Controlled phone value (without country code).
+ * @param props.onChange - Callback fired on change — receives numeric string with country code.
+ * @param props.defaultCountryIso - ISO code of the initially selected country. Default: "BR"
+ * @param props.searchCountryPlaceholder - Placeholder for country search. Default: "Pesquisar país"
+ * @param props.notFoundCountryText - Text shown when no country matches. Default: "Nenhum país encontrado"
+ * @param props.orientation - Layout direction. Default: "vertical"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
  *
- * @returns {JSX.Element} Phone input field with country picker and hidden input for form submission.
+ * @returns PhoneInput JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * <PhoneInput name="phone" label="Telefone" />
- * ```
+ * // Basic
+ * <PhoneInput name="phone" label="Phone" />
  *
- * @example
- * ```tsx
+ * // Controlled with outline variant
  * <PhoneInput
  *   name="contactPhone"
+ *   label="Contact Phone"
  *   value={phone}
- *   onChange={setPhone}
+ *   onChange={(v) => setPhone(v)}
  *   variant="outline"
  *   size="lg"
  * />
+ *
+ * // Pre-selected country (US)
+ * <PhoneInput
+ *   name="phone"
+ *   label="Phone"
+ *   defaultCountryIso="US"
+ *   showAsterisk
+ * />
  * ```
  */
 declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAqB7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAuKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAqB7C,KAAK,eAAe,GAAG;IACrB,yDAAyD;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kGAAkG;IAClG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6FAA6F;IAC7F,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACtD,qGAAqG;IACrG,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAuKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/phoneInput/index.js

@@ -11,53 +11,58 @@ import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsCon
 import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
 import { PhoneInputMask } from "./phoneInputMask";
 /**
- * Phone input with country selector, mask formatting, and hidden form value.
+ * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.
  *
- * The component formats the visible value according to the selected country mask,
- * while the hidden input stores a numeric string prefixed with the country code.
- * It also integrates with `useForm` to display validation errors by field name.
+ * The visible input is masked according to the selected country's phone format.
+ * The hidden `<input>` stores a numeric string prefixed with the country dial code for form submission.
+ * Integrates with `useForm` to display validation errors by field name.
  *
- * @param {PhoneInputProps} props Component properties.
- * @param {string} props.name Hidden input name used in form submission.
- * @param {string} [props.label] Optional field label.
- * @param {boolean} [props.showAsterisk] Displays required marker in the label.
- * @param {string} [props.errorMessage] Custom error message (overrides form context error).
- * @param {"md" | "lg"} [props.size="md"] Visual size.
- * @param {"solid" | "outline"} [props.variant="solid"] Visual variant.
- * @param {boolean} [props.disabled=false] Disables interactions.
- * @param {boolean} [props.readOnly=false] Prevents editing while keeping value visible.
- * @param {boolean} [props.isLoading=false] Applies loading state and disables interactions.
- * @param {string} [props.defaultValue=""] Initial phone value for uncontrolled usage.
- * @param {string} [props.value] Controlled phone value.
- * @param {(value: string) => void} [props.onChange] Callback with numeric value including country code.
- * @param {(typeof countries)[number]["iso"]} [props.defaultCountryIso] Reserved prop for default country ISO.
- * @param {string} [props.searchCountryPlaceholder="Pesquisar país"] Placeholder for country search input.
- * @param {string} [props.notFoundCountryText="Nenhum país encontrado"] Text shown when no country matches search.
- * @param {string} [props.className] Class applied to the field wrapper.
- * @param {string} [props.id] Optional id for the visible phone input.
- * @param {boolean} [props.unShowFieldTemplate=false] When `true`, skips wrapper/label/error rendering from `FieldTemplate`.
- * @param {"horizontal" | "vertical" | "horizontalReverse"} [props.orientation="horizontal"] Layout direction forwarded to `FieldTemplate`/`FieldWrapper`.
+ * @param props.name - Field name for form submission. Required.
+ * @param props.label - Label text displayed above the input.
+ * @param props.showAsterisk - Appends `*` to the label.
+ * @param props.errorMessage - Validation error message.
+ * @param props.size - Input size (`md` | `lg`). Default: "md"
+ * @param props.variant - Visual style variant. Default: "solid"
+ * @param props.disabled - Disables all interactions. Default: false
+ * @param props.readOnly - Prevents editing. Default: false
+ * @param props.isLoading - Shows loading state and disables interactions. Default: false
+ * @param props.defaultValue - Uncontrolled default phone value.
+ * @param props.value - Controlled phone value (without country code).
+ * @param props.onChange - Callback fired on change — receives numeric string with country code.
+ * @param props.defaultCountryIso - ISO code of the initially selected country. Default: "BR"
+ * @param props.searchCountryPlaceholder - Placeholder for country search. Default: "Pesquisar país"
+ * @param props.notFoundCountryText - Text shown when no country matches. Default: "Nenhum país encontrado"
+ * @param props.orientation - Layout direction. Default: "vertical"
+ * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
  *
- * @returns {JSX.Element} Phone input field with country picker and hidden input for form submission.
+ * @returns PhoneInput JSX element wrapped in `FieldTemplate`.
  *
  * @example
  * ```tsx
- * <PhoneInput name="phone" label="Telefone" />
- * ```
+ * // Basic
+ * <PhoneInput name="phone" label="Phone" />
  *
- * @example
- * ```tsx
+ * // Controlled with outline variant
  * <PhoneInput
  *   name="contactPhone"
+ *   label="Contact Phone"
  *   value={phone}
- *   onChange={setPhone}
+ *   onChange={(v) => setPhone(v)}
  *   variant="outline"
  *   size="lg"
  * />
+ *
+ * // Pre-selected country (US)
+ * <PhoneInput
+ *   name="phone"
+ *   label="Phone"
+ *   defaultCountryIso="US"
+ *   showAsterisk
+ * />
  * ```
  */
 function PhoneInput(props) {
-    const { defaultCountryIso, value: rawValue, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, unShowFieldTemplate = false, orientation = "horizontal", } = props;
+    const { defaultCountryIso, value: rawValue, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, unShowFieldTemplate = false, orientation = "vertical", } = props;
     const brasilCountry = countries.find((country) => country.iso === "BR");
     const defaultData = defaultValue ? formatToPhone(defaultValue) : "";
     const defaultCountry = defaultValue

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

@@ -2,144 +2,64 @@ import { 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;
 export { Popover };

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":"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,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;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAwCnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/popover/index.js

@@ -4,137 +4,48 @@ import { useState } from "react";
 import { useScrollLock } from "../../hooks/useScrollLock";
 import "./styles.css";
 /**
- * Popover component - used for displaying contextual content in a floating container that appears relative to a trigger button
+ * 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.
  */
 function Popover(props) {
     const { children, button, closeOnClick, className: baseClassName = "", orientation = "bottomLeft", } = props;