@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/types/components/Popover/index.d.ts

@@ -0,0 +1,142 @@
+import { DetailedHTMLProps, FC, HTMLAttributes } from "react";
+
+//#region src/components/Popover/index.d.ts
+
+/**
+ * Props for the main Popover component
+ * Extends HTMLDivElement attributes for full DOM compatibility
+ */
+type PopoverProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  /** Unique identifier linking the trigger to its popover content for accessibility */
+  identifier: string;
+};
+/**
+ * Composite type for the Popover component with Detail subcomponent
+ * Allows for Popover.Detail usage pattern
+ */
+type PopoverType = FC<PopoverProps> & {
+  Detail: FC<DetailProps>;
+};
+/**
+ * Horizontal alignment options for popover positioning
+ */
+declare enum PopoverXAlign {
+  /** Align popover to start (left) of trigger */
+  START = "start",
+  /** Align popover to end (right) of trigger */
+  END = "end",
+}
+/**
+ * Vertical alignment options for popover positioning
+ */
+declare enum PopoverYAlign {
+  /** Position popover below the trigger */
+  BELOW = "bellow",
+  /** Position popover above the trigger */
+  ABOVE = "above",
+}
+/**
+ * Popover Component
+ *
+ * A versatile popover container that displays contextual content when triggered by hover
+ * or focus interactions. Built with accessibility in mind and supports multiple positioning
+ * options with smooth animations.
+ *
+ * Features:
+ * - Hover and focus-based triggering
+ * - Multiple positioning options (above/below, start/end)
+ * - Accessibility compliant with ARIA attributes
+ * - Smooth animations with configurable delays
+ * - Optional directional arrows
+ * - Automatic z-index management
+ * - Responsive design support
+ *
+ * Architecture:
+ * - Main Popover acts as trigger container
+ * - Popover.Detail renders the actual popover content
+ * - Uses CSS groups for coordinated hover/focus states
+ * - Unique identifier system prevents conflicts
+ *
+ * @example
+ * Basic hover popover:
+ * ```jsx
+ * <Popover identifier="help-tooltip">
+ *   <button>Need Help?</button>
+ *
+ *   <Popover.Detail identifier="help-tooltip">
+ *     <div>This is helpful information!</div>
+ *   </Popover.Detail>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * Focus-triggered popover:
+ * ```jsx
+ * <Popover identifier="focus-menu">
+ *   <input placeholder="Focus me" />
+ *
+ *   <Popover.Detail
+ *     identifier="focus-menu"
+ *     isFocusable
+ *     isOverable={false}
+ *   >
+ *     <div>Focus-only menu content</div>
+ *   </Popover.Detail>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * Positioned popover with custom alignment:
+ * ```jsx
+ * <Popover identifier="positioned">
+ *   <span>Hover me</span>
+ *
+ *   <Popover.Detail
+ *     identifier="positioned"
+ *     xAlign={PopoverXAlign.END}
+ *     yAlign={PopoverYAlign.ABOVE}
+ *     displayArrow={false}
+ *   >
+ *     <div>Above and right-aligned</div>
+ *   </Popover.Detail>
+ * </Popover>
+ * ```
+ *
+ * Accessibility Features:
+ * - Proper ARIA labeling and relationships
+ * - Keyboard navigation support
+ * - Screen reader compatibility
+ * - Focus management
+ *
+ * Performance Considerations:
+ * - CSS-only animations for smooth transitions
+ * - Efficient group-based state management
+ * - Minimal DOM updates during interactions
+ *
+ * @param props - Popover component props
+ * @returns Trigger container with popover functionality
+ */
+declare const Popover: PopoverType;
+/**
+ * Props for the Popover.Detail component
+ * Extends HTMLDivElement attributes for styling flexibility
+ */
+type DetailProps = HTMLAttributes<HTMLDivElement> & {
+  /** Whether the popover responds to focus events on the trigger */
+  isFocusable?: boolean;
+  /** Controls visibility state - undefined allows automatic hover/focus control */
+  isHidden?: boolean;
+  /** Whether the popover responds to hover events on the trigger */
+  isOverable?: boolean;
+  /** Unique identifier matching the trigger's identifier for accessibility */
+  identifier: string;
+  /** Horizontal positioning relative to trigger */
+  xAlign?: PopoverXAlign | `${PopoverXAlign}`;
+  /** Vertical positioning relative to trigger */
+  yAlign?: PopoverYAlign | `${PopoverYAlign}`;
+  /** Whether to display the directional arrow indicator */
+  displayArrow?: boolean;
+};
+//#endregion
+export { DetailProps, Popover, PopoverProps, PopoverType, PopoverXAlign, PopoverYAlign };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Popover/index.tsx"],"sourcesContent":[],"mappings":";;;;;;AAQA;;AACE,KADU,YAAA,GAAe,iBACzB,CAAA,cAAA,CAAe,cAAf,CAAA,EACA,cADA,CAAA,GAAA;EACA;EAFyB,UAAA,EAAA,MAAA;CAAiB;AAY5C;;;;AACU,KADE,WAAA,GAAc,EAChB,CADmB,YACnB,CAAA,GAAA;EAAE,MAAA,EAAF,EAAE,CAAC,WAAD,CAAA;AAMZ,CAAA;AAUA;AAwFA;AAoBA;AAAyC,aAtH7B,aAAA;EAsHc;EAUf,KAAA,GAAA,OAAA;EAAmB;EAEnB,GAAA,GAAA,KAAA;;;;;aAxHC,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwFC,SAAS;;;;;KAoBV,WAAA,GAAc,eAAe;;;;;;;;;;WAU9B,mBAAmB;;WAEnB,mBAAmB"}

package/dist/types/components/PressableSpan/PressableSpan.d.ts

@@ -0,0 +1,116 @@
+import { FC, HTMLAttributes } from "react";
+
+//#region src/components/PressableSpan/PressableSpan.d.ts
+
+/**
+ * Props for the PressableSpan component
+ */
+type PressableSpanProps = {
+  /**
+   * Callback function triggered when a long press is detected
+   * @example
+   * ```tsx
+   * <PressableSpan onPress={() => console.log('Long pressed!')}>
+   *   Press and hold me
+   * </PressableSpan>
+   * ```
+   */
+  onPress: () => void;
+  /**
+   * Optional callback function triggered when clicking outside the component while it's in selecting state
+   * @example
+   * ```tsx
+   * <PressableSpan
+   *   onPress={() => setIsEditing(true)}
+   *   onClickOutside={() => setIsEditing(false)}
+   * >
+   *   Click outside to deselect
+   * </PressableSpan>
+   * ```
+   */
+  onClickOutside?: () => void;
+  /**
+   * Duration in milliseconds for long press detection
+   * @default 400
+   * @example
+   * ```tsx
+   * <PressableSpan pressDuration={800} onPress={() => {}}>
+   *   Longer press required
+   * </PressableSpan>
+   * ```
+   */
+  pressDuration?: number;
+  /**
+   * External control for the selecting state
+   * @example
+   * ```tsx
+   * <PressableSpan isSelecting={isEditing} onPress={() => {}}>
+   *   Externally controlled
+   * </PressableSpan>
+   * ```
+   */
+  isSelecting?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+/**
+ * PressableSpan - An interactive span element that responds to long press gestures
+ *
+ * A versatile component that detects long press interactions and provides visual feedback.
+ * Commonly used for text editing interfaces, selection systems, and interactive content
+ * that requires differentiation between quick clicks and intentional long presses.
+ *
+ * ## Key Features
+ * - **Long Press Detection**: Configurable press duration for different interaction patterns
+ * - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states
+ * - **Click Outside Detection**: Automatically deselects when clicking outside the component
+ * - **Touch Support**: Works seamlessly on both desktop and mobile devices
+ * - **Accessible**: Keyboard navigation support and proper ARIA attributes
+ *
+ * ## Use Cases
+ * - Text editing interfaces where long press activates edit mode
+ * - Content selection systems with visual feedback
+ * - Interactive cards or elements that need press-and-hold activation
+ * - Mobile-friendly interfaces requiring long press gestures
+ *
+ * ## Accessibility
+ * - Uses semantic `role="button"` for proper screen reader announcement
+ * - Keyboard navigable with `tabIndex={0}`
+ * - Focus management with proper blur handling
+ * - Visual outline indicators for focus and selection states
+ *
+ * @example
+ * Basic usage with long press detection:
+ * ```tsx
+ * <PressableSpan onPress={() => setIsEditing(true)}>
+ *   Press and hold to edit this text
+ * </PressableSpan>
+ * ```
+ *
+ * @example
+ * With custom press duration and click outside handling:
+ * ```tsx
+ * <PressableSpan
+ *   pressDuration={600}
+ *   onPress={() => setIsEditing(true)}
+ *   onClickOutside={() => setIsEditing(false)}
+ *   isSelecting={isEditing}
+ * >
+ *   Custom behavior configuration
+ * </PressableSpan>
+ * ```
+ *
+ * @example
+ * In a content editing context:
+ * ```tsx
+ * <PressableSpan
+ *   onPress={() => startEditingContent(contentId)}
+ *   onClickOutside={() => saveAndExitEditing()}
+ *   className="prose-text"
+ * >
+ *   {editableContent}
+ * </PressableSpan>
+ * ```
+ */
+declare const PressableSpan: FC<PressableSpanProps>;
+//#endregion
+export { PressableSpan };
+//# sourceMappingURL=PressableSpan.d.ts.map

package/dist/types/components/PressableSpan/PressableSpan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressableSpan.d.ts","names":[],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":[],"mappings":";;;;;;AAUe;AAsHf,KA9GK,kBAAA,GA2OJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA3LG,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8DN,eAAe,GAAG"}

package/dist/types/components/PressableSpan/index.d.ts

@@ -0,0 +1,2 @@
+import { PressableSpan } from "./PressableSpan.js";
+export { PressableSpan };

package/dist/types/components/RightDrawer/RightDrawer.d.ts

@@ -0,0 +1,204 @@
+import { FC, ReactNode } from "react";
+
+//#region src/components/RightDrawer/RightDrawer.d.ts
+
+/**
+ * Configuration for the back button functionality in the RightDrawer
+ *
+ * @interface BackButtonProps
+ */
+type BackButtonProps = {
+  /** Callback function triggered when the back button is clicked */
+  onBack: () => void;
+  /** Optional custom text for the back button. Defaults to "Go back" if not provided */
+  text?: string;
+};
+/**
+ * Props configuration for the RightDrawer component
+ *
+ * @interface RightDrawerProps
+ */
+type RightDrawerProps = {
+  /**
+   * Title displayed in the drawer header
+   * @example
+   * ```tsx
+   * <RightDrawer title="User Settings" identifier="settings">
+   *   Content here
+   * </RightDrawer>
+   * ```
+   */
+  title?: ReactNode;
+  /**
+   * Unique identifier for the drawer instance. Required for store management
+   * @example
+   * ```tsx
+   * <RightDrawer identifier="user-profile" title="Profile">
+   *   Profile content
+   * </RightDrawer>
+   * ```
+   */
+  identifier: string;
+  /** The content to be displayed inside the drawer */
+  children?: ReactNode;
+  /**
+   * Optional header content displayed below the title
+   * @example
+   * ```tsx
+   * <RightDrawer
+   *   title="Settings"
+   *   header={<div className="text-sm opacity-80">Configure your preferences</div>}
+   *   identifier="settings"
+   * >
+   *   Settings content
+   * </RightDrawer>
+   * ```
+   */
+  header?: ReactNode;
+  /**
+   * Whether the drawer should close when clicking outside of it
+   * @default true
+   * @example
+   * ```tsx
+   * <RightDrawer closeOnOutsideClick={false} identifier="persistent">
+   *   This drawer requires explicit close action
+   * </RightDrawer>
+   * ```
+   */
+  closeOnOutsideClick?: boolean;
+  /**
+   * Configuration for an optional back button in the drawer header
+   * @example
+   * ```tsx
+   * <RightDrawer
+   *   backButton={{
+   *     text: "Back to List",
+   *     onBack: () => navigate('/list')
+   *   }}
+   *   identifier="detail-view"
+   * >
+   *   Detail content
+   * </RightDrawer>
+   * ```
+   */
+  backButton?: BackButtonProps;
+  /**
+   * External control for the open state. When provided, overrides internal store state
+   * @example
+   * ```tsx
+   * const [isOpen, setIsOpen] = useState(false);
+   *
+   * <RightDrawer
+   *   isOpen={isOpen}
+   *   onClose={() => setIsOpen(false)}
+   *   identifier="controlled"
+   * >
+   *   Controlled drawer content
+   * </RightDrawer>
+   * ```
+   */
+  isOpen?: boolean;
+  /**
+   * Callback function triggered when the drawer is closed
+   * @example
+   * ```tsx
+   * <RightDrawer
+   *   onClose={() => console.log('Drawer closed')}
+   *   identifier="tracked"
+   * >
+   *   Content with close tracking
+   * </RightDrawer>
+   * ```
+   */
+  onClose?: () => void;
+};
+/**
+ * RightDrawer - A slide-out drawer panel that appears from the right side of the screen
+ *
+ * A versatile drawer component that provides an overlay panel for displaying secondary content,
+ * forms, details, or navigation. Features responsive design that adapts to mobile devices,
+ * configurable close behavior, and integrated state management through Zustand store.
+ *
+ * ## Key Features
+ * - **Responsive Design**: Full-width on mobile, fixed 400px width on desktop
+ * - **State Management**: Built-in Zustand store for managing multiple drawer instances
+ * - **Accessibility**: Proper ARIA attributes, keyboard navigation, and focus management
+ * - **Flexible Layout**: Customizable header, title, and content areas
+ * - **Click Outside**: Configurable outside click detection for auto-closing
+ * - **Scroll Management**: Automatic body scroll blocking when open
+ *
+ * ## Use Cases
+ * - Navigation menus and sidebars
+ * - Detail panels and forms
+ * - Settings and configuration interfaces
+ * - Shopping carts and checkout processes
+ * - User profiles and account management
+ * - Multi-step workflows and wizards
+ *
+ * ## Accessibility
+ * - **Focus Management**: Traps focus within the drawer when open
+ * - **Keyboard Navigation**: Escape key closes the drawer
+ * - **Screen Reader Support**: Proper ARIA labels and announcements
+ * - **Touch Support**: Mobile-optimized touch interactions
+ *
+ * ## State Management
+ * The component uses a Zustand store (`useRightDrawerStore`) to manage drawer state:
+ * - Multiple drawers can be managed simultaneously using unique identifiers
+ * - External components can open/close drawers using the store
+ * - Supports both controlled (via props) and uncontrolled (via store) patterns
+ *
+ * @example
+ * Basic usage with store management:
+ * ```tsx
+ * // Opening the drawer from another component
+ * const { open } = useRightDrawerStore();
+ *
+ * <button onClick={() => open('user-menu')}>
+ *   Open Menu
+ * </button>
+ *
+ * <RightDrawer identifier="user-menu" title="User Menu">
+ *   <nav>Navigation items here</nav>
+ * </RightDrawer>
+ * ```
+ *
+ * @example
+ * Controlled drawer with external state:
+ * ```tsx
+ * const [showDrawer, setShowDrawer] = useState(false);
+ *
+ * <RightDrawer
+ *   identifier="controlled-drawer"
+ *   title="Settings"
+ *   isOpen={showDrawer}
+ *   onClose={() => setShowDrawer(false)}
+ *   closeOnOutsideClick={false}
+ * >
+ *   <SettingsForm onSave={() => setShowDrawer(false)} />
+ * </RightDrawer>
+ * ```
+ *
+ * @example
+ * Complex drawer with back button and header:
+ * ```tsx
+ * <RightDrawer
+ *   identifier="product-detail"
+ *   title="Product Details"
+ *   header={
+ *     <div className="text-sm text-gray-600">
+ *       SKU: {product.sku} | Stock: {product.stock}
+ *     </div>
+ *   }
+ *   backButton={{
+ *     text: "Back to Catalog",
+ *     onBack: () => navigate('/catalog')
+ *   }}
+ * >
+ *   <ProductDetailView product={product} />
+ * </RightDrawer>
+ * ```
+ */
+declare const RightDrawer: FC<RightDrawerProps>;
+//#endregion
+export { RightDrawer };
+//# sourceMappingURL=RightDrawer.d.ts.map

package/dist/types/components/RightDrawer/RightDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightDrawer.d.ts","names":[],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":[],"mappings":";;;;;;AASe;AAeK;;KAAf,eAAA,GAoCQ;EAeF;EA6BI,MAAA,EAAA,GAAA,GAAA,IAAA;EAAe;EAwHjB,IAAA,CAAA,EAAA,MAAA;;;;;;;KA5LR,gBAAA;;;;;;;;;;UAUK;;;;;;;;;;;;aAcG;;;;;;;;;;;;;;WAeF;;;;;;;;;;;;;;;;;;;;;;;;;;;eA6BI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwHF,aAAa,GAAG"}

package/dist/types/components/RightDrawer/index.d.ts

@@ -0,0 +1,3 @@
+import { RightDrawer } from "./RightDrawer.js";
+import { useRightDrawerStore } from "./useRightDrawerStore.js";
+export { RightDrawer, useRightDrawerStore };

package/dist/types/components/RightDrawer/isElementAtTopAndNotCovered.d.ts

@@ -0,0 +1,49 @@
+//#region src/components/RightDrawer/isElementAtTopAndNotCovered.d.ts
+/**
+ * Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements
+ *
+ * This function is specifically used by the RightDrawer component to ensure that click-outside
+ * detection only triggers when the drawer is actually visible and not obscured by other UI elements.
+ *
+ * ## Algorithm
+ * 1. **Viewport Check**: Verifies the element is within the visible viewport bounds
+ * 2. **Coverage Check**: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer
+ * 3. **Center Point Testing**: Tests the center-top point of the element for accurate detection
+ *
+ * ## Use Cases
+ * - Click-outside detection for modal and drawer components
+ * - Visibility validation for overlay components
+ * - Z-index conflict resolution
+ * - Accessibility focus management
+ *
+ * @param element - The HTML element to check for visibility and coverage
+ * @returns Boolean indicating if the element is visible at the top and not covered by other elements
+ *
+ * @example
+ * Basic usage in click-outside detection:
+ * ```tsx
+ * const handleClickOutside = (event: MouseEvent) => {
+ *   if (!drawerRef.current) return;
+ *
+ *   const isVisible = isElementAtTopAndNotCovered(drawerRef.current);
+ *   const isClickOutside = !drawerRef.current.contains(event.target as Node);
+ *
+ *   if (isVisible && isClickOutside) {
+ *     closeDrawer();
+ *   }
+ * };
+ * ```
+ *
+ * @example
+ * Checking multiple overlays:
+ * ```tsx
+ * const overlays = document.querySelectorAll('.overlay');
+ * const visibleOverlays = Array.from(overlays).filter(overlay =>
+ *   isElementAtTopAndNotCovered(overlay as HTMLElement)
+ * );
+ * ```
+ */
+declare const isElementAtTopAndNotCovered: (element: HTMLElement) => boolean;
+//#endregion
+export { isElementAtTopAndNotCovered };
+//# sourceMappingURL=isElementAtTopAndNotCovered.d.ts.map

package/dist/types/components/RightDrawer/isElementAtTopAndNotCovered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementAtTopAndNotCovered.d.ts","names":[],"sources":["../../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":[],"mappings":";;AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,uCAAwC"}

package/dist/types/components/RightDrawer/useRightDrawerStore.d.ts

@@ -0,0 +1,116 @@
+import * as zustand0 from "zustand";
+
+//#region src/components/RightDrawer/useRightDrawerStore.d.ts
+
+/**
+ * Type definition for the RightDrawer Zustand store state and actions
+ *
+ * @interface RightDrawerStore
+ */
+type RightDrawerStore = {
+  /** Record of drawer identifiers and their open/closed states */
+  drawers: Record<string, boolean>;
+  /**
+   * Opens a drawer with the specified identifier
+   * @param key - Unique identifier for the drawer instance
+   * @example
+   * ```tsx
+   * const { open } = useRightDrawerStore();
+   * open('user-profile'); // Opens the drawer with identifier 'user-profile'
+   * ```
+   */
+  open: (key: string) => void;
+  /**
+   * Closes a drawer with the specified identifier
+   * @param key - Unique identifier for the drawer instance
+   * @example
+   * ```tsx
+   * const { close } = useRightDrawerStore();
+   * close('user-profile'); // Closes the drawer with identifier 'user-profile'
+   * ```
+   */
+  close: (key: string) => void;
+  /**
+   * Checks if a drawer with the specified identifier is currently open
+   * @param key - Unique identifier for the drawer instance
+   * @returns Boolean indicating if the drawer is open (defaults to false if not found)
+   * @example
+   * ```tsx
+   * const { isOpen } = useRightDrawerStore();
+   * const isProfileOpen = isOpen('user-profile');
+   * ```
+   */
+  isOpen: (key: string) => boolean;
+};
+/**
+ * Zustand store for managing RightDrawer component states
+ *
+ * This store provides centralized state management for multiple drawer instances,
+ * allowing different parts of the application to open, close, and check the status
+ * of drawers using unique identifiers.
+ *
+ * ## Features
+ * - **Multi-instance Management**: Handle multiple drawers simultaneously
+ * - **Simple API**: Open, close, and check drawer states with string identifiers
+ * - **Persistent State**: Drawer states persist until explicitly changed
+ * - **Type Safety**: Full TypeScript support with proper type inference
+ *
+ * ## Usage Patterns
+ *
+ * ### Basic Usage
+ * ```tsx
+ * import { useRightDrawerStore } from './useRightDrawerStore';
+ *
+ * function NavigationButton() {
+ *   const { open } = useRightDrawerStore();
+ *
+ *   return (
+ *     <button onClick={() => open('main-menu')}>
+ *       Open Menu
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * ### Conditional Rendering
+ * ```tsx
+ * function ConditionalContent() {
+ *   const isMenuOpen = useRightDrawerStore(state => state.isOpen('main-menu'));
+ *
+ *   return (
+ *     <div>
+ *       {isMenuOpen ? 'Menu is open' : 'Menu is closed'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ### Multiple Drawers
+ * ```tsx
+ * function MultiDrawerManager() {
+ *   const { open, close, isOpen } = useRightDrawerStore();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => open('cart')}>Open Cart</button>
+ *       <button onClick={() => open('profile')}>Open Profile</button>
+ *       <button onClick={() => {
+ *         close('cart');
+ *         close('profile');
+ *       }}>Close All</button>
+ *
+ *       <div>
+ *         Cart: {isOpen('cart') ? 'Open' : 'Closed'}
+ *         Profile: {isOpen('profile') ? 'Open' : 'Closed'}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @returns RightDrawerStore instance with drawer management capabilities
+ */
+declare const useRightDrawerStore: zustand0.UseBoundStore<zustand0.StoreApi<RightDrawerStore>>;
+//#endregion
+export { useRightDrawerStore };
+//# sourceMappingURL=useRightDrawerStore.d.ts.map

package/dist/types/components/RightDrawer/useRightDrawerStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRightDrawerStore.d.ts","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":[],"mappings":";;;;;;;AAkHgC;AAAhC;KA3GK,gBAAA,GA2G2B;EAAA;EAAA,OAAA,EAzGrB,MAyGqB,CAAA,MAAA,EAAA,OAAA,CAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAnB,qBAAmB,QAAA,CAAA,cAAA,QAAA,CAAA,SAAA"}