@myelmut/design-system 0.1.17 → 0.1.19

package/dist/types/index.d.ts

@@ -28,12 +28,15 @@ import { ReactComponent as PolaroidThreadIcon } from './polaroid-thread.svg';
 import { ReactComponent as ProfilIcon } from './profil.svg';
 import { ReactComponent as QuoteIcon } from './quote.svg';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 import { ReactComponent as StarIcon } from './star.svg';
 import { ReactComponent as SubtractIcon } from './subtract.svg';
 import { ReactComponent as TiktokIcon } from './Tiktok.svg';
 import { ReactComponent as TrustpilotIcon } from './trustpilot.svg';
 import { ReactComponent as UnmuteIcon } from './unmute.svg';
 
+export declare const accordionAnimation: (e: Event, details: HTMLDetailsElement, content: HTMLElement, delay?: number) => void;
+
 export { ArrowIcon }
 
 export { ArrowPlainIcon }
@@ -104,6 +107,8 @@ declare interface ClearButtonProps extends React.ButtonHTMLAttributes<HTMLButton
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
+export declare const closeOthersAccordions: (details: HTMLDetailsElement) => void;
+
 declare type CommonProps = {
     variant?: 'primary' | 'secondary' | 'terciary';
     color?: 'light' | 'dark';
@@ -131,6 +136,10 @@ export { CrossIcon }
 
 export { CrossRoundedIcon }
 
+export declare const debounce: (func: (...args: any[]) => void, wait: number) => (...args: any[]) => void;
+
+export declare const disableScroll: () => void;
+
 export declare const Dropdown: ({ label, id, options, placeholder, name, className, error, hasError, disabled, onChange, value, required, searchable }: DropdownProps) => JSX.Element;
 
 export declare const DropdownMenu: ({ name, options, value, values, disabled, className, onChange, onChangeMultiple, isOpen, multiple }: DropdownMenuProps) => JSX.Element;
@@ -165,6 +174,8 @@ declare interface EmblemProps {
     className?: string;
 }
 
+export declare const enableScroll: () => void;
+
 export declare const ErrorMessage: ({ message, hasError, className, id }: ErrorMessageProps) => JSX.Element;
 
 declare interface ErrorMessageProps {
@@ -399,6 +410,10 @@ declare interface NewsletterProps {
     error?: string;
 }
 
+export declare const onKeyDown: (e: React.KeyboardEvent<HTMLLIElement | HTMLLabelElement | HTMLDivElement>, callback: () => void) => void;
+
+export declare const onNumericInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+
 export declare const ParagraphTitle: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLParagraphElement>>;
 
 export { PauseIcon }
@@ -669,6 +684,58 @@ declare interface UpCardProps {
     illustrationClassName?: string;
 }
 
+export declare function useArrowNavigation<T extends HTMLElement = HTMLElement>(selector: string): RefObject<T | null>;
+
+/**
+ * Calls `handler` when a pointer interaction finishes outside the element referenced by `ref`.
+ *
+ * The hook ensures the most recent `handler` is invoked even if it changes between renders.
+ *
+ * @param ref - React ref of the element to detect outside interactions for
+ * @param handler - Callback invoked with the originating `MouseEvent` or `TouchEvent` when a `pointerup` occurs outside the referenced element
+ */
+export declare function useClickOutside<T extends HTMLElement>(ref: React.RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void): void;
+
+/**
+ * Observes a single element and invokes callbacks when it enters or leaves the viewport threshold.
+ *
+ * @param ref - RefObject pointing to the target HTMLElement to observe
+ * @param onAppear - Callback invoked when the element becomes intersecting
+ * @param onDisappear - Callback invoked when the element stops being intersecting
+ * @param threshold - Intersection ratio threshold between 0 and 1 that determines when callbacks fire
+ */
+export declare function useIntersectionObserver({ ref, onAppear, onDisappear, threshold }: UseSingleObserverOptions): void;
+
+export declare function useIsMobile(): boolean;
+
+/**
+ * Observe all elements matching a CSS selector and invoke a callback for each element when it becomes visible.
+ *
+ * Observers are created for the currently matched elements and re-created on window resize to account for layout changes; observers are cleaned up on unmount or when inputs change.
+ *
+ * @param selector - CSS selector used to find elements to observe. If falsy, no observer is created.
+ * @param callback - Invoked for each intersecting entry as `callback(entry, element)`, where `entry` is the IntersectionObserverEntry and `element` is the observed HTMLElement.
+ * @param root - Optional ancestor element used as the viewport for intersection; `null` means the browser viewport.
+ * @param threshold - Intersection ratio at which the callback is triggered (e.g., `0.1`).
+ * @param rootMargin - Margin around the root bounding box (e.g., `'0px'`, `'10px 0px'`).
+ */
+export declare function useMultiIntersectionObserver({ selector, callback, root, threshold, rootMargin }: UseMultiObserverOptions): void;
+
+declare type UseMultiObserverOptions = {
+    selector: string;
+    callback: (entry: IntersectionObserverEntry, element: HTMLElement) => void;
+    root?: Element | null;
+    threshold?: number;
+    rootMargin?: string;
+};
+
+declare type UseSingleObserverOptions = {
+    ref: RefObject<HTMLElement>;
+    onAppear: () => void;
+    onDisappear: () => void;
+    threshold?: number;
+};
+
 export declare const VideoPlayer: ({ videoId, alt, className, placeholderImageMobile, hasSound, placeholderImageDesktop, placeholderImageMobile2x, placeholderImageDesktop2x }: VideoPlayerProps) => JSX.Element;
 
 declare interface VideoPlayerProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Design system for Elmut project",
   "repository": {
     "type": "git",

package/styles/globals.css

@@ -102,7 +102,7 @@
     --radius-table: 1.875rem;
 
     /* Custom breakpoints (affect all @md, @lg, etc. utilities) */
-    --breakpoint-xs: 155;
+    --breakpoint-xs: 155px;
 
     /* Custom container widths */
     --container-xs: 100vw;