@misael703/ui 1.0.1 → 1.1.0

package/dist/hooks/useDelayedUnmount.d.mts

@@ -0,0 +1,22 @@
+/**
+ * Delays unmounting of a component so an exit animation can play.
+ *
+ * When `open` flips to false, the hook keeps `mounted` true for `durationMs`
+ * (giving CSS time to play `is-closing` keyframes) and then flips it to
+ * false. The `closing` flag toggles during that window so the consumer can
+ * apply a class like `is-closing` for the CSS animation.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * const { mounted, closing } = useDelayedUnmount(open, 200);
+ * if (!mounted) return null;
+ * return <div className={cx('modal', closing && 'is-closing')} />
+ * ```
+ */
+declare function useDelayedUnmount(open: boolean, durationMs: number): {
+    mounted: boolean;
+    closing: boolean;
+};
+
+export { useDelayedUnmount };

package/dist/hooks/useDelayedUnmount.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Delays unmounting of a component so an exit animation can play.
+ *
+ * When `open` flips to false, the hook keeps `mounted` true for `durationMs`
+ * (giving CSS time to play `is-closing` keyframes) and then flips it to
+ * false. The `closing` flag toggles during that window so the consumer can
+ * apply a class like `is-closing` for the CSS animation.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * const { mounted, closing } = useDelayedUnmount(open, 200);
+ * if (!mounted) return null;
+ * return <div className={cx('modal', closing && 'is-closing')} />
+ * ```
+ */
+declare function useDelayedUnmount(open: boolean, durationMs: number): {
+    mounted: boolean;
+    closing: boolean;
+};
+
+export { useDelayedUnmount };

package/dist/hooks/useDelayedUnmount.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunkGIOMV3J7_js = require('../chunk-GIOMV3J7.js');
+
+
+
+Object.defineProperty(exports, "useDelayedUnmount", {
+  enumerable: true,
+  get: function () { return chunkGIOMV3J7_js.useDelayedUnmount; }
+});
+//# sourceMappingURL=useDelayedUnmount.js.map
+//# sourceMappingURL=useDelayedUnmount.js.map

package/dist/hooks/useDelayedUnmount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"useDelayedUnmount.js"}

package/dist/hooks/useDelayedUnmount.mjs

@@ -0,0 +1,3 @@
+export { useDelayedUnmount } from '../chunk-XXUSZD5I.mjs';
+//# sourceMappingURL=useDelayedUnmount.mjs.map
+//# sourceMappingURL=useDelayedUnmount.mjs.map

package/dist/hooks/useDelayedUnmount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"useDelayedUnmount.mjs"}

package/dist/hooks/useDismiss.d.mts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+interface UseDismissOptions {
+    open: boolean;
+    onDismiss: () => void;
+    /** Refs whose subtree should NOT count as "outside" (trigger + panel). */
+    refs: Array<React.RefObject<HTMLElement | null>>;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    /** Focus returns here when the panel closes (usually the trigger). */
+    returnFocusRef?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * Shared dismiss behaviour for floating panels: closes on outside
+ * pointer-down and on Escape, and restores focus to the trigger when the
+ * panel closes (focus hygiene for keyboard/AT users).
+ *
+ * `onDismiss` and `refs` are read through refs internally, so callers
+ * don't need to memoize them to avoid re-subscribing listeners.
+ */
+declare function useDismiss({ open, onDismiss, refs, closeOnEscape, closeOnOutsideClick, returnFocusRef, }: UseDismissOptions): void;
+
+export { type UseDismissOptions, useDismiss };

package/dist/hooks/useDismiss.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+interface UseDismissOptions {
+    open: boolean;
+    onDismiss: () => void;
+    /** Refs whose subtree should NOT count as "outside" (trigger + panel). */
+    refs: Array<React.RefObject<HTMLElement | null>>;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    /** Focus returns here when the panel closes (usually the trigger). */
+    returnFocusRef?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * Shared dismiss behaviour for floating panels: closes on outside
+ * pointer-down and on Escape, and restores focus to the trigger when the
+ * panel closes (focus hygiene for keyboard/AT users).
+ *
+ * `onDismiss` and `refs` are read through refs internally, so callers
+ * don't need to memoize them to avoid re-subscribing listeners.
+ */
+declare function useDismiss({ open, onDismiss, refs, closeOnEscape, closeOnOutsideClick, returnFocusRef, }: UseDismissOptions): void;
+
+export { type UseDismissOptions, useDismiss };

package/dist/hooks/useDismiss.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunkXMLBKK7X_js = require('../chunk-XMLBKK7X.js');
+
+
+
+Object.defineProperty(exports, "useDismiss", {
+  enumerable: true,
+  get: function () { return chunkXMLBKK7X_js.useDismiss; }
+});
+//# sourceMappingURL=useDismiss.js.map
+//# sourceMappingURL=useDismiss.js.map

package/dist/hooks/useDismiss.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"useDismiss.js"}

package/dist/hooks/useDismiss.mjs

@@ -0,0 +1,3 @@
+export { useDismiss } from '../chunk-6P2TKRTL.mjs';
+//# sourceMappingURL=useDismiss.mjs.map
+//# sourceMappingURL=useDismiss.mjs.map

package/dist/hooks/useDismiss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"useDismiss.mjs"}

package/dist/hooks/usePopoverPosition.d.mts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+type PopoverAlign = 'start' | 'center' | 'end';
+/** Anything that can report its viewport rect: a DOM element or a virtual
+ *  anchor (e.g. a point under the cursor for a context menu). */
+interface VirtualElement {
+    getBoundingClientRect: () => DOMRect;
+}
+interface UsePopoverPositionOptions {
+    open: boolean;
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    offset?: number;
+    /** Expose the anchor's width so the consumer can match it (comboboxes). */
+    matchAnchorWidth?: boolean;
+}
+interface PopoverPosition {
+    /** Document-relative coords (use with `position: absolute` in a body portal). */
+    top: number;
+    left: number;
+    /** Side actually used after flipping; useful for arrow/animation origin. */
+    side: PopoverSide;
+    /** False until the first measure. Keep content `visibility: hidden` until true. */
+    ready: boolean;
+    /** Anchor width, only when `matchAnchorWidth` is set. */
+    width?: number;
+}
+/**
+ * Positions a floating panel relative to an anchor, for panels portaled to
+ * `document.body`. Computes document-relative coords from
+ * `getBoundingClientRect()`, flips to the opposite side when the preferred
+ * side doesn't fit the viewport, clamps into the viewport, and recomputes
+ * on scroll of *any* ancestor (capture-phase) and on resize
+ * (rAF-coalesced). Listeners are torn down on close/unmount.
+ *
+ * The content must be mounted (it can be visually hidden) so its size can
+ * be measured — gate visibility on the returned `ready` flag.
+ *
+ * ```tsx
+ * const pos = usePopoverPosition(triggerRef, contentRef, { open, side: 'bottom' });
+ * <Portal><div ref={contentRef} style={{
+ *   position: 'absolute', top: pos.top, left: pos.left,
+ *   visibility: pos.ready ? 'visible' : 'hidden',
+ * }} /></Portal>
+ * ```
+ */
+declare function usePopoverPosition(anchorRef: React.RefObject<HTMLElement | VirtualElement | null>, contentRef: React.RefObject<HTMLElement | null>, { open, side, align, offset, matchAnchorWidth }: UsePopoverPositionOptions): PopoverPosition;
+
+export { type PopoverAlign, type PopoverPosition, type PopoverSide, type UsePopoverPositionOptions, type VirtualElement, usePopoverPosition };

package/dist/hooks/usePopoverPosition.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+type PopoverAlign = 'start' | 'center' | 'end';
+/** Anything that can report its viewport rect: a DOM element or a virtual
+ *  anchor (e.g. a point under the cursor for a context menu). */
+interface VirtualElement {
+    getBoundingClientRect: () => DOMRect;
+}
+interface UsePopoverPositionOptions {
+    open: boolean;
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    offset?: number;
+    /** Expose the anchor's width so the consumer can match it (comboboxes). */
+    matchAnchorWidth?: boolean;
+}
+interface PopoverPosition {
+    /** Document-relative coords (use with `position: absolute` in a body portal). */
+    top: number;
+    left: number;
+    /** Side actually used after flipping; useful for arrow/animation origin. */
+    side: PopoverSide;
+    /** False until the first measure. Keep content `visibility: hidden` until true. */
+    ready: boolean;
+    /** Anchor width, only when `matchAnchorWidth` is set. */
+    width?: number;
+}
+/**
+ * Positions a floating panel relative to an anchor, for panels portaled to
+ * `document.body`. Computes document-relative coords from
+ * `getBoundingClientRect()`, flips to the opposite side when the preferred
+ * side doesn't fit the viewport, clamps into the viewport, and recomputes
+ * on scroll of *any* ancestor (capture-phase) and on resize
+ * (rAF-coalesced). Listeners are torn down on close/unmount.
+ *
+ * The content must be mounted (it can be visually hidden) so its size can
+ * be measured — gate visibility on the returned `ready` flag.
+ *
+ * ```tsx
+ * const pos = usePopoverPosition(triggerRef, contentRef, { open, side: 'bottom' });
+ * <Portal><div ref={contentRef} style={{
+ *   position: 'absolute', top: pos.top, left: pos.left,
+ *   visibility: pos.ready ? 'visible' : 'hidden',
+ * }} /></Portal>
+ * ```
+ */
+declare function usePopoverPosition(anchorRef: React.RefObject<HTMLElement | VirtualElement | null>, contentRef: React.RefObject<HTMLElement | null>, { open, side, align, offset, matchAnchorWidth }: UsePopoverPositionOptions): PopoverPosition;
+
+export { type PopoverAlign, type PopoverPosition, type PopoverSide, type UsePopoverPositionOptions, type VirtualElement, usePopoverPosition };

package/dist/hooks/usePopoverPosition.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunkDPMUWQHL_js = require('../chunk-DPMUWQHL.js');
+
+
+
+Object.defineProperty(exports, "usePopoverPosition", {
+  enumerable: true,
+  get: function () { return chunkDPMUWQHL_js.usePopoverPosition; }
+});
+//# sourceMappingURL=usePopoverPosition.js.map
+//# sourceMappingURL=usePopoverPosition.js.map

package/dist/hooks/usePopoverPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"usePopoverPosition.js"}

package/dist/hooks/usePopoverPosition.mjs

@@ -0,0 +1,3 @@
+export { usePopoverPosition } from '../chunk-H3PRT76O.mjs';
+//# sourceMappingURL=usePopoverPosition.mjs.map
+//# sourceMappingURL=usePopoverPosition.mjs.map

package/dist/hooks/usePopoverPosition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"usePopoverPosition.mjs"}

package/dist/index.d.mts

@@ -28,7 +28,7 @@ export { PermissionAction, PermissionMatrix, PermissionMatrixProps, PermissionRo
 export { GalleryImage, ImageGallery, ImageGalleryProps, Lightbox, LightboxProps } from './components/Gallery.mjs';
 export { AddressField, AddressFieldOption, AddressForm, AddressFormProps, CartDrawer, CartDrawerProps, CartLineItem, CompareAttribute, CompareItem, CompareTable, CompareTableProps, FreeShippingProgress, FreeShippingProgressProps, OrderLineRow, OrderSummary, OrderSummaryProps, PriceDisplay, PriceDisplayProps, PromoCodeInput, PromoCodeInputProps, QuantitySelector, QuantitySelectorProps, Rating, RatingProps, VariantOption, VariantSelector, VariantSelectorProps, WishlistButton, WishlistButtonProps } from './components/Commerce.mjs';
 export { CategoryItem, CategoryNav, CategoryNavProps, Hero, HeroProps, Testimonial, TestimonialProps } from './components/Marketing.mjs';
-export { Popover, PopoverAlign, PopoverPlacement, PopoverProps } from './components/Popover.mjs';
+export { Popover, PopoverPlacement, PopoverProps } from './components/Popover.mjs';
 export { HoverCard, HoverCardPlacement, HoverCardProps } from './components/HoverCard.mjs';
 export { ContextMenu, ContextMenuItem, ContextMenuProps } from './components/ContextMenu.mjs';
 export { Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupProps, ToggleGroupSingleProps, ToggleProps, ToggleSize, ToggleVariant } from './components/Toggle.mjs';
@@ -39,5 +39,8 @@ export { ResizableDirection, ResizableGroup, ResizableGroupProps, ResizableHandl
 export { Menubar, MenubarItem, MenubarMenu, MenubarProps } from './components/Menubar.mjs';
 export { NavLink, NavMenuItem, NavigationMenu, NavigationMenuProps } from './components/NavigationMenu.mjs';
 export { Collapsible, CollapsibleContent, CollapsibleProps, CollapsibleTrigger } from './components/Collapsible.mjs';
+export { Portal, PortalProps } from './components/Portal.mjs';
+export { PopoverAlign, PopoverPosition, PopoverSide, UsePopoverPositionOptions, VirtualElement, usePopoverPosition } from './hooks/usePopoverPosition.mjs';
+export { UseDismissOptions, useDismiss } from './hooks/useDismiss.mjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export { PermissionAction, PermissionMatrix, PermissionMatrixProps, PermissionRo
 export { GalleryImage, ImageGallery, ImageGalleryProps, Lightbox, LightboxProps } from './components/Gallery.js';
 export { AddressField, AddressFieldOption, AddressForm, AddressFormProps, CartDrawer, CartDrawerProps, CartLineItem, CompareAttribute, CompareItem, CompareTable, CompareTableProps, FreeShippingProgress, FreeShippingProgressProps, OrderLineRow, OrderSummary, OrderSummaryProps, PriceDisplay, PriceDisplayProps, PromoCodeInput, PromoCodeInputProps, QuantitySelector, QuantitySelectorProps, Rating, RatingProps, VariantOption, VariantSelector, VariantSelectorProps, WishlistButton, WishlistButtonProps } from './components/Commerce.js';
 export { CategoryItem, CategoryNav, CategoryNavProps, Hero, HeroProps, Testimonial, TestimonialProps } from './components/Marketing.js';
-export { Popover, PopoverAlign, PopoverPlacement, PopoverProps } from './components/Popover.js';
+export { Popover, PopoverPlacement, PopoverProps } from './components/Popover.js';
 export { HoverCard, HoverCardPlacement, HoverCardProps } from './components/HoverCard.js';
 export { ContextMenu, ContextMenuItem, ContextMenuProps } from './components/ContextMenu.js';
 export { Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupProps, ToggleGroupSingleProps, ToggleProps, ToggleSize, ToggleVariant } from './components/Toggle.js';
@@ -39,5 +39,8 @@ export { ResizableDirection, ResizableGroup, ResizableGroupProps, ResizableHandl
 export { Menubar, MenubarItem, MenubarMenu, MenubarProps } from './components/Menubar.js';
 export { NavLink, NavMenuItem, NavigationMenu, NavigationMenuProps } from './components/NavigationMenu.js';
 export { Collapsible, CollapsibleContent, CollapsibleProps, CollapsibleTrigger } from './components/Collapsible.js';
+export { Portal, PortalProps } from './components/Portal.js';
+export { PopoverAlign, PopoverPosition, PopoverSide, UsePopoverPositionOptions, VirtualElement, usePopoverPosition } from './hooks/usePopoverPosition.js';
+export { UseDismissOptions, useDismiss } from './hooks/useDismiss.js';
 import 'react/jsx-runtime';
 import 'react';