npm - @intlayer/design-system - Versions diffs - 7.5.12 → 7.5.14 - Mend

@intlayer/design-system 7.5.12 → 7.5.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (366) hide show

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileThemeSwitcher.mjs","names":[~~"MobileThemeSwitcher: FC<MobileThemeSwitcherProps>"~~],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,~~MAAaA~~,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,qBAAqB,MAAM,SAAS,MAEJ;CAEpD,MAAM,WAGJ,SAAS,MAAM,SACX,UAAU,MAAM,OACd,MAAM,QACN,MAAM,OAGR,qBACE,MAAM,SAGN,SAAS,MAAM,QACb,MAAM,OACN,MAAM;CAEhB,MAAM,mBAAmB;AACvB,MAAI,aAAa,MAAM,OACrB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC;EAAO,WAAU;EAAyB,cAAW;;GACpD,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;;GACK"}
1	+ {"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,qBAAqB,MAAM,SAAS,MAEJ;CAEpD,MAAM,WAGJ,SAAS,MAAM,SACX,UAAU,MAAM,OACd,MAAM,QACN,MAAM,OAGR,qBACE,MAAM,SAGN,SAAS,MAAM,QACb,MAAM,OACN,MAAM;CAEhB,MAAM,mBAAmB;AACvB,MAAI,aAAa,MAAM,OACrB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC;EAAO,WAAU;EAAyB,cAAW;;GACpD,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;;GACK"}

package/dist/esm/components/Toaster/Toast.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
+import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
+import * as ToastPrimitives from "@radix-ui/react-toast";
 //#region src/components/Toaster/Toast.tsx
 const ToastProvider = ToastPrimitives;

package/dist/esm/components/Toaster/Toast.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.mjs","names":["ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>","Toast: FC<\n ComponentProps<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n>","ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>>","ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>>","ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>>","ToastDescription: FC<\n ComponentProps<typeof ToastPrimitives.Description>\n>"],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nconst ToastProvider = ToastPrimitives;\n\nconst ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Viewport\n className={cn(\n 'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n className\n )}\n {...props}\n />\n);\n\n/*\n Toast variant styles using class-variance-authority.\n \n Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n \n @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n \n // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n \n // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n /\nconst toastVariants = cva(\n 'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',\n {\n variants: {\n /* Toast visual variants for different message types /\n variant: {\n /* Error state with red styling for failures and warnings /\n error: 'bg-error/40 text-text',\n /* Success state with green styling for confirmations /\n success: 'bg-success/30 text-text',\n /* Default neutral styling for general information /\n default: 'bg-card/80 text-text',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n/\n Toast Component\n \n A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n \n ## Features\n * - Visual Variants: Error, success, and default styling themes\n * - Animations: Smooth slide-in/slide-out transitions with fade effects\n * - Swipe Gestures: Touch-friendly swipe-to-dismiss functionality\n * - Accessibility: Full screen reader support and keyboard navigation\n * - Positioning: Smart positioning with responsive viewport handling\n * - Auto-dismiss: Configurable automatic dismissal timing\n \n ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n \n @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n * <ToastTitle>Notification</ToastTitle>\n * <ToastDescription>Your action was completed successfully.</ToastDescription>\n * <ToastClose />\n * </Toast>\n \n // Error toast with action button\n * <Toast variant=\"error\">\n * <ToastTitle>Upload Failed</ToastTitle>\n * <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n * <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * <ToastClose />\n * </Toast>\n * ```\n /\nconst Toast: FC<\n ComponentProps<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n return (\n <ToastPrimitives.Root\n className={cn(toastVariants({ variant }), className)}\n {...props}\n />\n );\n};\n\n/\n ToastAction Component\n \n An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n \n ## Features\n * - Accessibility: Requires `altText` prop for screen readers\n * - Visual States: Hover, focus, and disabled state styling\n * - Theme Integration: Supports destructive and default themes\n * - Keyboard Navigation: Full keyboard accessibility support\n \n ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n \n @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n * Retry\n * </ToastAction>\n \n // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n * Undo\n * </ToastAction>\n \n // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n * View File\n * </ToastAction>\n * ```\n /\nconst ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Action\n className={cn(\n 'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n className\n )}\n {...props}\n />\n);\n\nconst ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Close\n className={cn(\n 'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n className\n )}\n toast-close=\"\"\n {...props}\n >\n <X className=\"size-5\" />\n </ToastPrimitives.Close>\n);\n/\n ToastTitle Component\n \n The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n \n ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n \n @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n /\nconst ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Title\n className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n {...props}\n />\n);\n\n/\n ToastDescription Component\n \n Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n \n ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n \n ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n \n @example\n * ```tsx\n * <ToastDescription>\n * Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n \n <ToastDescription>\n * Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n /\nconst ToastDescription: FC<\n ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n <ToastPrimitives.Description\n className={cn('text-sm opacity-90', className)}\n {...props}\n />\n);\n/\n Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n /\ntype ToastProps = ComponentProps<typeof Toast>;\n\n/\n Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\ntype ToastActionElement = ReactElement<typeof ToastAction>;\n\nexport {\n Toast,\n ToastAction,\n ToastClose,\n ToastDescription,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n type ToastActionElement,\n type ToastProps,\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAgB;AAEtB,MAAMA,iBAAsE,EAC1E,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,mIACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,gBAAgB,IACpB,koBACA;CACE,UAAU,EAER,SAAS;EAEP,OAAO;EAEP,SAAS;EAET,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,MAAMC,SAGD,EAAE,WAAW,SAAS,GAAG,YAAY;AACxC,QACE,oBAAC,gBAAgB;EACf,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCN,MAAMC,eAAkE,EACtE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,wdACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMC,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,kVACA,UACD;CACD,eAAY;CACZ,GAAI;WAEJ,oBAAC,KAAE,WAAU,WAAW;EACF;;;;;;;;;;;;;;;;;;;AAoB1B,MAAMC,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,yCAAyC,UAAU;CACjE,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BJ,MAAMC,oBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GAAG,sBAAsB,UAAU;CAC9C,GAAI;EACJ"}
1	+ {"version":3,"file":"Toast.mjs","names":[],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nconst ToastProvider = ToastPrimitives;\n\nconst ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Viewport\n className={cn(\n 'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n className\n )}\n {...props}\n />\n);\n\n/*\n Toast variant styles using class-variance-authority.\n \n Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n \n @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n \n // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n \n // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n /\nconst toastVariants = cva(\n 'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',\n {\n variants: {\n /* Toast visual variants for different message types /\n variant: {\n /* Error state with red styling for failures and warnings /\n error: 'bg-error/40 text-text',\n /* Success state with green styling for confirmations /\n success: 'bg-success/30 text-text',\n /* Default neutral styling for general information /\n default: 'bg-card/80 text-text',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n/\n Toast Component\n \n A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n \n ## Features\n * - Visual Variants: Error, success, and default styling themes\n * - Animations: Smooth slide-in/slide-out transitions with fade effects\n * - Swipe Gestures: Touch-friendly swipe-to-dismiss functionality\n * - Accessibility: Full screen reader support and keyboard navigation\n * - Positioning: Smart positioning with responsive viewport handling\n * - Auto-dismiss: Configurable automatic dismissal timing\n \n ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n \n @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n * <ToastTitle>Notification</ToastTitle>\n * <ToastDescription>Your action was completed successfully.</ToastDescription>\n * <ToastClose />\n * </Toast>\n \n // Error toast with action button\n * <Toast variant=\"error\">\n * <ToastTitle>Upload Failed</ToastTitle>\n * <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n * <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * <ToastClose />\n * </Toast>\n * ```\n /\nconst Toast: FC<\n ComponentProps<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n return (\n <ToastPrimitives.Root\n className={cn(toastVariants({ variant }), className)}\n {...props}\n />\n );\n};\n\n/\n ToastAction Component\n \n An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n \n ## Features\n * - Accessibility: Requires `altText` prop for screen readers\n * - Visual States: Hover, focus, and disabled state styling\n * - Theme Integration: Supports destructive and default themes\n * - Keyboard Navigation: Full keyboard accessibility support\n \n ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n \n @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n * Retry\n * </ToastAction>\n \n // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n * Undo\n * </ToastAction>\n \n // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n * View File\n * </ToastAction>\n * ```\n /\nconst ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Action\n className={cn(\n 'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n className\n )}\n {...props}\n />\n);\n\nconst ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Close\n className={cn(\n 'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n className\n )}\n toast-close=\"\"\n {...props}\n >\n <X className=\"size-5\" />\n </ToastPrimitives.Close>\n);\n/\n ToastTitle Component\n \n The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n \n ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n \n @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n /\nconst ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Title\n className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n {...props}\n />\n);\n\n/\n ToastDescription Component\n \n Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n \n ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n \n ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n \n @example\n * ```tsx\n * <ToastDescription>\n * Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n \n <ToastDescription>\n * Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n /\nconst ToastDescription: FC<\n ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n <ToastPrimitives.Description\n className={cn('text-sm opacity-90', className)}\n {...props}\n />\n);\n/\n Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n /\ntype ToastProps = ComponentProps<typeof Toast>;\n\n/\n Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\ntype ToastActionElement = ReactElement<typeof ToastAction>;\n\nexport {\n Toast,\n ToastAction,\n ToastClose,\n ToastDescription,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n type ToastActionElement,\n type ToastProps,\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAgB;AAEtB,MAAM,iBAAsE,EAC1E,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,mIACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,gBAAgB,IACpB,koBACA;CACE,UAAU,EAER,SAAS;EAEP,OAAO;EAEP,SAAS;EAET,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,MAAM,SAGD,EAAE,WAAW,SAAS,GAAG,YAAY;AACxC,QACE,oBAAC,gBAAgB;EACf,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCN,MAAM,eAAkE,EACtE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,wdACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,kVACA,UACD;CACD,eAAY;CACZ,GAAI;WAEJ,oBAAC,KAAE,WAAU,WAAW;EACF;;;;;;;;;;;;;;;;;;;AAoB1B,MAAM,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,yCAAyC,UAAU;CACjE,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BJ,MAAM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GAAG,sBAAsB,UAAU;CAC9C,GAAI;EACJ"}

package/dist/esm/components/Toaster/useToast.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useToast.mjs","names":["toast","listeners: ((state: State) => void)[]","memoryState: State","props"],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/*\n Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n /\nconst TOAST_LIMIT = 1;\n\n/\n Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n /\nconst TOAST_REMOVE_DELAY = 15 60 * 1000; // 15 seconds\n\n/*\n Extended toast configuration with additional properties for the toast system.\n \n Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n \n @example\n * ```tsx\n * const toast: ToasterToast = {\n * id: '1',\n * variant: 'success',\n * title: 'Success!',\n * description: 'Your action completed successfully.',\n * action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n /\ntype ToasterToast = ToastProps & {\n /* Unique identifier for the toast instance /\n id: string;\n /* Optional title text or React element /\n title?: ReactNode;\n /* Optional description text or React element /\n description?: ReactNode;\n /* Optional action button element /\n action?: ToastActionElement;\n};\n\n/\n Action types for toast state management using reducer pattern.\n \n Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n /\nenum ActionTypes {\n /* Add a new toast to the display queue /\n ADD_TOAST = 'ADD_TOAST',\n /* Update properties of an existing toast /\n UPDATE_TOAST = 'UPDATE_TOAST',\n /* Mark a toast as dismissed (triggers exit animation) /\n DISMISS_TOAST = 'DISMISS_TOAST',\n /* Completely remove a toast from memory /\n REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n};\n\ntype Action =\n \| {\n type: ActionTypes.ADD_TOAST;\n toast: ToasterToast;\n }\n \| {\n type: ActionTypes.UPDATE_TOAST;\n toast: Partial<ToasterToast>;\n }\n \| {\n type: ActionTypes.DISMISS_TOAST;\n toastId?: ToasterToast['id'];\n }\n \| {\n type: ActionTypes.REMOVE_TOAST;\n toastId?: ToasterToast['id'];\n };\n\ntype State = {\n toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionTypes.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\n/\n Toast state reducer function that handles all toast state transitions.\n \n Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n \n ## State Management\n * - ADD_TOAST: Adds new toast and enforces limit by removing excess toasts\n * - UPDATE_TOAST: Updates existing toast properties while preserving identity\n * - DISMISS_TOAST: Marks toasts as closed and schedules removal\n * - REMOVE_TOAST: Permanently removes toasts from state\n \n ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n \n @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n \n @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n * type: ActionTypes.ADD_TOAST,\n * toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n \n // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n * type: ActionTypes.DISMISS_TOAST,\n * toastId: '1'\n * });\n * ```\n /\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionTypes.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionTypes.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionTypes.DISMISS_TOAST: {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId \|\| toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n };\n }\n case ActionTypes.REMOVE_TOAST:\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n};\n\n/\n Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n /\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/\n Creates and displays a new toast notification.\n \n This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n \n ## Features\n * - Automatic ID Generation: Each toast gets a unique identifier\n * - State Management: Integrates with global toast state\n * - Lifecycle Control: Returns functions to update or dismiss the toast\n * - Auto-dismiss: Automatically closes when user dismisses\n \n ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n \n @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n \n @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n * title: 'Success!',\n * description: 'Your file was uploaded successfully.',\n * variant: 'success'\n * });\n \n // Error toast with retry action\n * const errorToast = toast({\n * title: 'Upload Failed',\n * description: 'Could not upload file. Please try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n \n // Update toast content dynamically\n * errorToast.update({\n * title: 'Retrying...',\n * description: 'Please wait while we retry the upload.',\n * variant: 'default'\n * });\n \n // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n /\nconst toast = ({ ...props }: Toast) => {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: ActionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n });\n const dismiss = () =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n dispatch({\n type: ActionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n};\n\n/\n React hook for managing toast notifications.\n \n Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n \n ## Features\n * - State Synchronization: Automatically updates when toast state changes\n * - Toast Creation: Provides the `toast()` function for creating notifications\n * - Batch Dismissal: Can dismiss all toasts or specific toasts by ID\n * - Memory Management: Handles proper cleanup of listeners\n \n ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n \n @returns Toast state and control functions\n \n @example\n * ```tsx\n * function NotificationButton() {\n * const { toast, toasts, dismiss } = useToast();\n \n const showSuccess = () => {\n * toast({\n * title: 'Success!',\n * description: 'Operation completed successfully.',\n * variant: 'success'\n * });\n * };\n \n const clearAll = () => {\n * dismiss(); // Dismisses all toasts\n * };\n \n return (\n * <div>\n * <button onClick={showSuccess}>Show Success</button>\n * <button onClick={clearAll}>Clear All ({toasts.length})</button>\n * </div>\n * );\n * }\n \n // Usage in a form component\n * function ContactForm() {\n * const { toast } = useToast();\n \n const handleSubmit = async (data) => {\n * try {\n * await submitForm(data);\n * toast({\n * title: 'Form Submitted',\n * description: 'We\\'ll get back to you soon!',\n * variant: 'success'\n * });\n * } catch (error) {\n * toast({\n * title: 'Submission Failed',\n * description: 'Please check your connection and try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n * });\n * }\n * };\n \n // ... form JSX\n * }\n * ```\n \n ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n const [state, setState] = useState<State>(memoryState);\n\n useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n };\n};\n\nexport { toast, useToast };\n"],"mappings":"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"}
1	+ {"version":3,"file":"useToast.mjs","names":["toast","props"],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/*\n Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n /\nconst TOAST_LIMIT = 1;\n\n/\n Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n /\nconst TOAST_REMOVE_DELAY = 15 60 * 1000; // 15 seconds\n\n/*\n Extended toast configuration with additional properties for the toast system.\n \n Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n \n @example\n * ```tsx\n * const toast: ToasterToast = {\n * id: '1',\n * variant: 'success',\n * title: 'Success!',\n * description: 'Your action completed successfully.',\n * action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n /\ntype ToasterToast = ToastProps & {\n /* Unique identifier for the toast instance /\n id: string;\n /* Optional title text or React element /\n title?: ReactNode;\n /* Optional description text or React element /\n description?: ReactNode;\n /* Optional action button element /\n action?: ToastActionElement;\n};\n\n/\n Action types for toast state management using reducer pattern.\n \n Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n /\nenum ActionTypes {\n /* Add a new toast to the display queue /\n ADD_TOAST = 'ADD_TOAST',\n /* Update properties of an existing toast /\n UPDATE_TOAST = 'UPDATE_TOAST',\n /* Mark a toast as dismissed (triggers exit animation) /\n DISMISS_TOAST = 'DISMISS_TOAST',\n /* Completely remove a toast from memory /\n REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n};\n\ntype Action =\n \| {\n type: ActionTypes.ADD_TOAST;\n toast: ToasterToast;\n }\n \| {\n type: ActionTypes.UPDATE_TOAST;\n toast: Partial<ToasterToast>;\n }\n \| {\n type: ActionTypes.DISMISS_TOAST;\n toastId?: ToasterToast['id'];\n }\n \| {\n type: ActionTypes.REMOVE_TOAST;\n toastId?: ToasterToast['id'];\n };\n\ntype State = {\n toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionTypes.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\n/\n Toast state reducer function that handles all toast state transitions.\n \n Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n \n ## State Management\n * - ADD_TOAST: Adds new toast and enforces limit by removing excess toasts\n * - UPDATE_TOAST: Updates existing toast properties while preserving identity\n * - DISMISS_TOAST: Marks toasts as closed and schedules removal\n * - REMOVE_TOAST: Permanently removes toasts from state\n \n ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n \n @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n \n @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n * type: ActionTypes.ADD_TOAST,\n * toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n \n // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n * type: ActionTypes.DISMISS_TOAST,\n * toastId: '1'\n * });\n * ```\n /\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionTypes.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionTypes.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionTypes.DISMISS_TOAST: {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId \|\| toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n };\n }\n case ActionTypes.REMOVE_TOAST:\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n};\n\n/\n Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n /\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/\n Creates and displays a new toast notification.\n \n This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n \n ## Features\n * - Automatic ID Generation: Each toast gets a unique identifier\n * - State Management: Integrates with global toast state\n * - Lifecycle Control: Returns functions to update or dismiss the toast\n * - Auto-dismiss: Automatically closes when user dismisses\n \n ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n \n @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n \n @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n * title: 'Success!',\n * description: 'Your file was uploaded successfully.',\n * variant: 'success'\n * });\n \n // Error toast with retry action\n * const errorToast = toast({\n * title: 'Upload Failed',\n * description: 'Could not upload file. Please try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n \n // Update toast content dynamically\n * errorToast.update({\n * title: 'Retrying...',\n * description: 'Please wait while we retry the upload.',\n * variant: 'default'\n * });\n \n // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n /\nconst toast = ({ ...props }: Toast) => {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: ActionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n });\n const dismiss = () =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n dispatch({\n type: ActionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n};\n\n/\n React hook for managing toast notifications.\n \n Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n \n ## Features\n * - State Synchronization: Automatically updates when toast state changes\n * - Toast Creation: Provides the `toast()` function for creating notifications\n * - Batch Dismissal: Can dismiss all toasts or specific toasts by ID\n * - Memory Management: Handles proper cleanup of listeners\n \n ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n \n @returns Toast state and control functions\n \n @example\n * ```tsx\n * function NotificationButton() {\n * const { toast, toasts, dismiss } = useToast();\n \n const showSuccess = () => {\n * toast({\n * title: 'Success!',\n * description: 'Operation completed successfully.',\n * variant: 'success'\n * });\n * };\n \n const clearAll = () => {\n * dismiss(); // Dismisses all toasts\n * };\n \n return (\n * <div>\n * <button onClick={showSuccess}>Show Success</button>\n * <button onClick={clearAll}>Clear All ({toasts.length})</button>\n * </div>\n * );\n * }\n \n // Usage in a form component\n * function ContactForm() {\n * const { toast } = useToast();\n \n const handleSubmit = async (data) => {\n * try {\n * await submitForm(data);\n * toast({\n * title: 'Form Submitted',\n * description: 'We\\'ll get back to you soon!',\n * variant: 'success'\n * });\n * } catch (error) {\n * toast({\n * title: 'Submission Failed',\n * description: 'Please check your connection and try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n * });\n * }\n * };\n \n // ... form JSX\n * }\n * ```\n \n ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n const [state, setState] = useState<State>(memoryState);\n\n useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n };\n};\n\nexport { toast, useToast };\n"],"mappings":"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"}

package/dist/esm/components/WithResizer/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["WithResizer: FC<PropsWithChildren<WithResizerProps>>"],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n type FC,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\n/*\n Props for the WithResizer component.\n \n Defines the configuration for a resizable container with drag-based width adjustment.\n \n @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n * <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n \n // Sidebar with resizing\n * <WithResizer\n * initialWidth={250}\n * minWidth={180}\n * maxWidth={400}\n * >\n * <nav className=\"h-full p-4\">\n * <SidebarContent />\n * </nav>\n * </WithResizer>\n \n // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n * <div className=\"h-full overflow-auto\">\n * <PanelContent />\n * </div>\n * </WithResizer>\n * ```\n /\ntype WithResizerProps = {\n /* Initial width of the resizable container in pixels /\n initialWidth: number;\n /* Maximum allowed width in pixels (optional, no limit if not specified) /\n maxWidth?: number;\n /* Minimum allowed width in pixels /\n minWidth?: number;\n /* Position of the resize handle (default: 'right') /\n handlePosition?: 'left' \| 'right';\n};\n\n/\n WithResizer Component\n \n A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n \n ## Features\n * - Mouse & Touch Support: Works with both mouse drag and touch interactions\n * - Constraint Enforcement: Respects minimum and maximum width boundaries\n * - Visual Feedback: Clear resize handle with hover and active states\n * - Smooth Interactions: Passive event listeners for optimal performance\n * - Accessibility: ARIA slider role with proper value announcements\n * - Responsive Design: Adapts to different screen sizes and containers\n \n ## Technical Implementation\n * - Event Handling: Uses `useCallback` for optimal performance\n * - Boundary Calculation: Real-time width calculation based on mouse/touch position\n * - State Management: Tracks resizing state for visual feedback\n * - Memory Management: Proper cleanup of global event listeners\n * - Touch Events: Full support for mobile touch interactions\n \n ## Visual Design\n * - Resize Handle: Rounded handle positioned on the right border\n * - Border Indicator: Visual border showing resizable edge\n * - State Feedback: Different colors for normal, hover, and active states\n * - Dark Mode: Full support with appropriate color scheme\n * - Smooth Transitions: CSS transitions for visual polish\n \n ## Use Cases\n * - Application Sidebars: Collapsible navigation and tool panels\n * - Content Panels: Adjustable content areas in complex layouts\n * - Split Panes: Dividing screen space between multiple content areas\n * - Inspector Panels: Debugging tools and property inspectors\n * - File Explorers: Tree views with adjustable column widths\n * - Dashboard Widgets: Customizable widget sizes for dashboards\n \n ## Accessibility Features\n * - ARIA Slider: Proper slider role for screen readers\n * - Value Announcements: Current, minimum, and maximum values announced\n * - Keyboard Focus: Focusable with tab navigation\n * - Clear Affordances: Visual indicators for interactive elements\n \n @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n \n <div className=\"flex h-screen\">\n * <WithResizer\n * initialWidth={sidebarWidth}\n * minWidth={200}\n * maxWidth={400}\n * >\n * <aside className=\"h-full bg-gray-100 p-4\">\n * <nav>\n * <NavItems />\n * </nav>\n * </aside>\n * </WithResizer>\n \n <main className=\"flex-1 p-6\">\n * <MainContent />\n * </main>\n * </div>\n \n // Developer tools panel\n * <WithResizer\n * initialWidth={350}\n * minWidth={250}\n * maxWidth={600}\n * >\n * <div className=\"h-full flex flex-col\">\n * <div className=\"flex-1 overflow-auto p-4\">\n * <InspectorContent />\n * </div>\n * <div className=\"border-t p-2\">\n * <Controls />\n * </div>\n * </div>\n * </WithResizer>\n \n // Multi-column layout\n * <div className=\"flex h-full\">\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n * <FileExplorer />\n * </WithResizer>\n \n <WithResizer initialWidth={400} minWidth={300}>\n * <CodeEditor />\n * </WithResizer>\n \n <div className=\"flex-1 min-w-0\">\n * <OutputPanel />\n * </div>\n * </div>\n * ```\n \n ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n \n ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n /\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n initialWidth,\n maxWidth,\n minWidth = 0,\n handlePosition = 'right',\n children,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [width, setWidth] = useState(initialWidth);\n\n const resizeState = useRef({\n startX: 0,\n startWidth: 0,\n factor: 1,\n });\n\n // Handler to resize the div\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n if (resizeState.current.startWidth === 0) return;\n\n let clientX = 0;\n if (mouseMoveEvent instanceof MouseEvent) {\n clientX = mouseMoveEvent.clientX;\n } else if (\n typeof TouchEvent !== 'undefined' &&\n mouseMoveEvent instanceof TouchEvent\n ) {\n clientX = mouseMoveEvent.touches[0].clientX;\n }\n\n const { startX, startWidth, factor } = resizeState.current;\n const delta = (clientX - startX) / factor;\n // Invert delta for left handle (moving left decreases width, moving right increases width)\n const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n const newWidth = startWidth + adjustedDelta;\n\n const constrainedWidth = Math.max(\n Math.min(newWidth, maxWidth ?? Infinity),\n minWidth\n );\n\n setWidth(constrainedWidth);\n },\n [maxWidth, minWidth, handlePosition]\n );\n\n // Handler to stop resizing\n const stopResizing = useCallback(() => {\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n }, [resize]);\n\n // Handler to start resizing\n const startResizing = useCallback(\n (\n mouseDownEvent:\n \| React.MouseEvent<HTMLDivElement>\n \| React.TouchEvent<HTMLDivElement>\n ) => {\n mouseDownEvent.preventDefault();\n const container = containerRef.current;\n\n if (!container) return;\n\n const { width: rectWidth } = container.getBoundingClientRect();\n const offsetWidth = container.offsetWidth;\n const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n let clientX = 0;\n if ('touches' in mouseDownEvent) {\n clientX = mouseDownEvent.touches[0].clientX;\n } else {\n clientX = mouseDownEvent.clientX;\n }\n\n resizeState.current = {\n startX: clientX,\n startWidth: offsetWidth,\n factor,\n };\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n window.addEventListener('mousemove', resize, { passive: true });\n window.addEventListener('mouseup', stopResizing);\n window.addEventListener('touchmove', resize, { passive: true });\n window.addEventListener('touchend', stopResizing);\n },\n [resize, stopResizing]\n );\n\n useEffect(() => {\n return () => {\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n };\n }, [resize, stopResizing]);\n\n return (\n <div\n className={cn(\n 'relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950',\n handlePosition === 'right'\n ? [\n 'border-r-[2px]',\n 'after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ]\n : [\n 'border-l-[2px]',\n 'after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ],\n 'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n minWidth && `min-w-[${minWidth}px]`,\n maxWidth && `max-w-[${maxWidth}px]`\n )}\n style={{\n width: `${width}px`,\n }}\n ref={containerRef}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n aria-valuemin={minWidth}\n aria-valuemax={maxWidth}\n aria-valuenow={width}\n aria-label=\"Resizable component\"\n role=\"slider\"\n tabIndex={0}\n >\n {/ biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n <div\n role=\"presentation\"\n className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n onMouseDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAaA,eAAwD,EACnE,cACA,UACA,WAAW,GACX,iBAAiB,SACjB,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAEhD,MAAM,cAAc,OAAO;EACzB,QAAQ;EACR,YAAY;EACZ,QAAQ;EACT,CAAC;CAGF,MAAM,SAAS,aACZ,mBAA4C;AAC3C,MAAI,YAAY,QAAQ,eAAe,EAAG;EAE1C,IAAI,UAAU;AACd,MAAI,0BAA0B,WAC5B,WAAU,eAAe;WAEzB,OAAO,eAAe,eACtB,0BAA0B,WAE1B,WAAU,eAAe,QAAQ,GAAG;EAGtC,MAAM,EAAE,QAAQ,YAAY,WAAW,YAAY;EACnD,MAAM,SAAS,UAAU,UAAU;EAGnC,MAAM,WAAW,cADK,mBAAmB,SAAS,CAAC,QAAQ;AAQ3D,WALyB,KAAK,IAC5B,KAAK,IAAI,UAAU,YAAY,SAAS,EACxC,SACD,CAEyB;IAE5B;EAAC;EAAU;EAAU;EAAe,CACrC;CAGD,MAAM,eAAe,kBAAkB;AACrC,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AACjC,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,WAAW,aAAa;AACnD,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,YAAY,aAAa;IACnD,CAAC,OAAO,CAAC;CAGZ,MAAM,gBAAgB,aAElB,mBAGG;AACH,iBAAe,gBAAgB;EAC/B,MAAM,YAAY,aAAa;AAE/B,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,OAAO,cAAc,UAAU,uBAAuB;EAC9D,MAAM,cAAc,UAAU;EAC9B,MAAM,SAAS,cAAc,IAAI,YAAY,cAAc;EAE3D,IAAI,UAAU;AACd,MAAI,aAAa,eACf,WAAU,eAAe,QAAQ,GAAG;MAEpC,WAAU,eAAe;AAG3B,cAAY,UAAU;GACpB,QAAQ;GACR,YAAY;GACZ;GACD;AAED,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AAEjC,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;IAEnD,CAAC,QAAQ,aAAa,CACvB;AAED,iBAAgB;AACd,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,sHACA,mBAAmB,UACf,CACE,kBACA,0QACD,GACD,CACE,kBACA,0QACD,EACL,yHACA,YAAY,UAAU,SAAS,MAC/B,YAAY,UAAU,SAAS,KAChC;EACD,OAAO,EACL,OAAO,GAAG,MAAM,KACjB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;YAGV,oBAAC;GACC,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n type FC,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\n/*\n Props for the WithResizer component.\n \n Defines the configuration for a resizable container with drag-based width adjustment.\n \n @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n * <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n \n // Sidebar with resizing\n * <WithResizer\n * initialWidth={250}\n * minWidth={180}\n * maxWidth={400}\n * >\n * <nav className=\"h-full p-4\">\n * <SidebarContent />\n * </nav>\n * </WithResizer>\n \n // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n * <div className=\"h-full overflow-auto\">\n * <PanelContent />\n * </div>\n * </WithResizer>\n * ```\n /\ntype WithResizerProps = {\n /* Initial width of the resizable container in pixels /\n initialWidth: number;\n /* Maximum allowed width in pixels (optional, no limit if not specified) /\n maxWidth?: number;\n /* Minimum allowed width in pixels /\n minWidth?: number;\n /* Position of the resize handle (default: 'right') /\n handlePosition?: 'left' \| 'right';\n};\n\n/\n WithResizer Component\n \n A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n \n ## Features\n * - Mouse & Touch Support: Works with both mouse drag and touch interactions\n * - Constraint Enforcement: Respects minimum and maximum width boundaries\n * - Visual Feedback: Clear resize handle with hover and active states\n * - Smooth Interactions: Passive event listeners for optimal performance\n * - Accessibility: ARIA slider role with proper value announcements\n * - Responsive Design: Adapts to different screen sizes and containers\n \n ## Technical Implementation\n * - Event Handling: Uses `useCallback` for optimal performance\n * - Boundary Calculation: Real-time width calculation based on mouse/touch position\n * - State Management: Tracks resizing state for visual feedback\n * - Memory Management: Proper cleanup of global event listeners\n * - Touch Events: Full support for mobile touch interactions\n \n ## Visual Design\n * - Resize Handle: Rounded handle positioned on the right border\n * - Border Indicator: Visual border showing resizable edge\n * - State Feedback: Different colors for normal, hover, and active states\n * - Dark Mode: Full support with appropriate color scheme\n * - Smooth Transitions: CSS transitions for visual polish\n \n ## Use Cases\n * - Application Sidebars: Collapsible navigation and tool panels\n * - Content Panels: Adjustable content areas in complex layouts\n * - Split Panes: Dividing screen space between multiple content areas\n * - Inspector Panels: Debugging tools and property inspectors\n * - File Explorers: Tree views with adjustable column widths\n * - Dashboard Widgets: Customizable widget sizes for dashboards\n \n ## Accessibility Features\n * - ARIA Slider: Proper slider role for screen readers\n * - Value Announcements: Current, minimum, and maximum values announced\n * - Keyboard Focus: Focusable with tab navigation\n * - Clear Affordances: Visual indicators for interactive elements\n \n @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n \n <div className=\"flex h-screen\">\n * <WithResizer\n * initialWidth={sidebarWidth}\n * minWidth={200}\n * maxWidth={400}\n * >\n * <aside className=\"h-full bg-gray-100 p-4\">\n * <nav>\n * <NavItems />\n * </nav>\n * </aside>\n * </WithResizer>\n \n <main className=\"flex-1 p-6\">\n * <MainContent />\n * </main>\n * </div>\n \n // Developer tools panel\n * <WithResizer\n * initialWidth={350}\n * minWidth={250}\n * maxWidth={600}\n * >\n * <div className=\"h-full flex flex-col\">\n * <div className=\"flex-1 overflow-auto p-4\">\n * <InspectorContent />\n * </div>\n * <div className=\"border-t p-2\">\n * <Controls />\n * </div>\n * </div>\n * </WithResizer>\n \n // Multi-column layout\n * <div className=\"flex h-full\">\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n * <FileExplorer />\n * </WithResizer>\n \n <WithResizer initialWidth={400} minWidth={300}>\n * <CodeEditor />\n * </WithResizer>\n \n <div className=\"flex-1 min-w-0\">\n * <OutputPanel />\n * </div>\n * </div>\n * ```\n \n ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n \n ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n /\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n initialWidth,\n maxWidth,\n minWidth = 0,\n handlePosition = 'right',\n children,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [width, setWidth] = useState(initialWidth);\n\n const resizeState = useRef({\n startX: 0,\n startWidth: 0,\n factor: 1,\n });\n\n // Handler to resize the div\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n if (resizeState.current.startWidth === 0) return;\n\n let clientX = 0;\n if (mouseMoveEvent instanceof MouseEvent) {\n clientX = mouseMoveEvent.clientX;\n } else if (\n typeof TouchEvent !== 'undefined' &&\n mouseMoveEvent instanceof TouchEvent\n ) {\n clientX = mouseMoveEvent.touches[0].clientX;\n }\n\n const { startX, startWidth, factor } = resizeState.current;\n const delta = (clientX - startX) / factor;\n // Invert delta for left handle (moving left decreases width, moving right increases width)\n const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n const newWidth = startWidth + adjustedDelta;\n\n const constrainedWidth = Math.max(\n Math.min(newWidth, maxWidth ?? Infinity),\n minWidth\n );\n\n setWidth(constrainedWidth);\n },\n [maxWidth, minWidth, handlePosition]\n );\n\n // Handler to stop resizing\n const stopResizing = useCallback(() => {\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n }, [resize]);\n\n // Handler to start resizing\n const startResizing = useCallback(\n (\n mouseDownEvent:\n \| React.MouseEvent<HTMLDivElement>\n \| React.TouchEvent<HTMLDivElement>\n ) => {\n mouseDownEvent.preventDefault();\n const container = containerRef.current;\n\n if (!container) return;\n\n const { width: rectWidth } = container.getBoundingClientRect();\n const offsetWidth = container.offsetWidth;\n const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n let clientX = 0;\n if ('touches' in mouseDownEvent) {\n clientX = mouseDownEvent.touches[0].clientX;\n } else {\n clientX = mouseDownEvent.clientX;\n }\n\n resizeState.current = {\n startX: clientX,\n startWidth: offsetWidth,\n factor,\n };\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n window.addEventListener('mousemove', resize, { passive: true });\n window.addEventListener('mouseup', stopResizing);\n window.addEventListener('touchmove', resize, { passive: true });\n window.addEventListener('touchend', stopResizing);\n },\n [resize, stopResizing]\n );\n\n useEffect(() => {\n return () => {\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n };\n }, [resize, stopResizing]);\n\n return (\n <div\n className={cn(\n 'relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950',\n handlePosition === 'right'\n ? [\n 'border-r-[2px]',\n 'after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ]\n : [\n 'border-l-[2px]',\n 'after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ],\n 'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n minWidth && `min-w-[${minWidth}px]`,\n maxWidth && `max-w-[${maxWidth}px]`\n )}\n style={{\n width: `${width}px`,\n }}\n ref={containerRef}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n aria-valuemin={minWidth}\n aria-valuemax={maxWidth}\n aria-valuenow={width}\n aria-label=\"Resizable component\"\n role=\"slider\"\n tabIndex={0}\n >\n {/ biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n <div\n role=\"presentation\"\n className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n onMouseDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAa,eAAwD,EACnE,cACA,UACA,WAAW,GACX,iBAAiB,SACjB,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAEhD,MAAM,cAAc,OAAO;EACzB,QAAQ;EACR,YAAY;EACZ,QAAQ;EACT,CAAC;CAGF,MAAM,SAAS,aACZ,mBAA4C;AAC3C,MAAI,YAAY,QAAQ,eAAe,EAAG;EAE1C,IAAI,UAAU;AACd,MAAI,0BAA0B,WAC5B,WAAU,eAAe;WAEzB,OAAO,eAAe,eACtB,0BAA0B,WAE1B,WAAU,eAAe,QAAQ,GAAG;EAGtC,MAAM,EAAE,QAAQ,YAAY,WAAW,YAAY;EACnD,MAAM,SAAS,UAAU,UAAU;EAGnC,MAAM,WAAW,cADK,mBAAmB,SAAS,CAAC,QAAQ;AAQ3D,WALyB,KAAK,IAC5B,KAAK,IAAI,UAAU,YAAY,SAAS,EACxC,SACD,CAEyB;IAE5B;EAAC;EAAU;EAAU;EAAe,CACrC;CAGD,MAAM,eAAe,kBAAkB;AACrC,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AACjC,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,WAAW,aAAa;AACnD,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,YAAY,aAAa;IACnD,CAAC,OAAO,CAAC;CAGZ,MAAM,gBAAgB,aAElB,mBAGG;AACH,iBAAe,gBAAgB;EAC/B,MAAM,YAAY,aAAa;AAE/B,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,OAAO,cAAc,UAAU,uBAAuB;EAC9D,MAAM,cAAc,UAAU;EAC9B,MAAM,SAAS,cAAc,IAAI,YAAY,cAAc;EAE3D,IAAI,UAAU;AACd,MAAI,aAAa,eACf,WAAU,eAAe,QAAQ,GAAG;MAEpC,WAAU,eAAe;AAG3B,cAAY,UAAU;GACpB,QAAQ;GACR,YAAY;GACZ;GACD;AAED,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AAEjC,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;IAEnD,CAAC,QAAQ,aAAa,CACvB;AAED,iBAAgB;AACd,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,sHACA,mBAAmB,UACf,CACE,kBACA,0QACD,GACD,CACE,kBACA,0QACD,EACL,yHACA,YAAY,UAAU,SAAS,MAC/B,YAAY,UAAU,SAAS,KAChC;EACD,OAAO,EACL,OAAO,GAAG,MAAM,KACjB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;YAGV,oBAAC;GACC,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}

package/dist/esm/components/index.mjs CHANGED Viewed

@@ -1,6 +1,3 @@
-import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toaster/Toast.mjs";
-import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
-import { Toaster } from "./Toaster/Toaster.mjs";
 import { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants } from "./Container/index.mjs";
 import { Loader } from "./Loader/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants } from "./Button/Button.mjs";
@@ -100,5 +97,8 @@ import { Terminal } from "./Terminal/Terminal.mjs";
 import { Modes } from "./ThemeSwitcherDropDown/types.mjs";
 import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
+import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toaster/Toast.mjs";
+import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
+import { Toaster } from "./Toaster/Toaster.mjs";
 export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, Breadcrumb, Browser, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditor, ContentSelector, CopyButton, CopyToClipboard, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, GridPattern, H1, H2, H3, H4, H5, H6, HeightResizer, HideShow, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, Label, LanguageBackground, LanguageSection, Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, PaginationSize, PaginationVariant, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Terminal, TextArea, TextEditor, TextEditorContainer, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, VersionSwitcher, VersionSwitcherProvider, WithResizer, XLogo, YoutubeLogo, badgeVariants, buttonVariants, checkIsExternalLink, checkboxVariants, containerVariants, getCapitals, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, reducer, toast, traceKeys, useCopyToClipboard, useDebounce, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawerStore, useToast, useVersionSwitcher };

package/dist/esm/dist/esm/components/Container/index.mjs CHANGED Viewed

@@ -30,11 +30,11 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 		},
 		padding: {
 			none: "p-0",
-			sm: "px-2 py-4",
-			md: "px-4 py-6",
-			lg: "px-6 py-8",
-			xl: "px-8 py-10",
-			"2xl": "px-10 py-12"
+			sm: "px-3 py-2",
+			md: "px-4 py-3",
+			lg: "px-6 py-4",
+			xl: "px-8 py-6",
+			"2xl": "px-10 py-8"
 		},
 		separator: {
 			without: "",

package/dist/esm/dist/esm/components/Container/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../components/Container/index.mjs"],"sourcesContent":["import { cn } from \"../../utils/cn.mjs\";\nimport { cva } from \"class-variance-authority\";\nimport { jsx } from \"react/jsx-runtime\";\n\n//#region src/components/Container/index.tsx\n/*\n Container component variants using class-variance-authority\n* Provides flexible styling options for background, padding, borders, and layout\n/\nconst containerVariants = cva(\"flex flex-col text-text backdrop-blur\", {\n\tvariants: {\n\t\troundedSize: {\n\t\t\tnone: \"rounded-none\",\n\t\t\tsm: \"rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md\",\n\t\t\tmd: \"rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg\",\n\t\t\tlg: \"rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\",\n\t\t\txl: \"rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl\",\n\t\t\t\"2xl\": \"rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\",\n\t\t\t\"3xl\": \"rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl\",\n\t\t\t\"4xl\": \"rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]\",\n\t\t\tfull: \"rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full\"\n\t\t},\n\t\ttransparency: {\n\t\t\tnone: \"bg-card\",\n\t\t\tsm: \"bg-card/90\",\n\t\t\tmd: \"bg-card/70\",\n\t\t\tlg: \"bg-card/40\",\n\t\t\txl: \"bg-card/20\",\n\t\t\tfull: \"\"\n\t\t},\n\t\tpadding: {\n\t\t\tnone: \"p-0\",\n\t\t\tsm: \"px-2 py-4\",\n\t\t\tmd: \"px-4 py-6\",\n\t\t\tlg: \"px-6 py-8\",\n\t\t\txl: \"px-8 py-10\",\n\t\t\t\"2xl\": \"px-10 py-12\"\n\t\t},\n\t\tseparator: {\n\t\t\twithout: \"\",\n\t\t\tx: \"divide-x divide-dashed divide-text/20\",\n\t\t\ty: \"divide-y divide-dashed divide-text/20\",\n\t\t\tboth: \"divide-x divide-y divide-dashed divide-text/20\"\n\t\t},\n\t\tborder: {\n\t\t\tnone: \"\",\n\t\t\twith: \"border-[1.3px]\"\n\t\t},\n\t\tborderColor: {\n\t\t\tprimary: \"border-primary\",\n\t\t\tsecondary: \"border-secondary\",\n\t\t\tneutral: \"border-neutral\",\n\t\t\tcard: \"border-card\",\n\t\t\ttext: \"border-text\",\n\t\t\terror: \"border-error\",\n\t\t\twarning: \"border-warning\",\n\t\t\tsuccess: \"border-success\"\n\t\t},\n\t\tbackground: {\n\t\t\tnone: \"\",\n\t\t\thoverable: \"bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur\",\n\t\t\twith: \"\"\n\t\t},\n\t\tgap: {\n\t\t\tnone: \"gap-0\",\n\t\t\tsm: \"gap-1\",\n\t\t\tmd: \"gap-3\",\n\t\t\tlg: \"gap-5\",\n\t\t\txl: \"gap-8\",\n\t\t\t\"2xl\": \"gap-10\"\n\t\t}\n\t},\n\tdefaultVariants: {\n\t\troundedSize: \"lg\",\n\t\tborder: \"none\",\n\t\tborderColor: \"text\",\n\t\ttransparency: \"md\",\n\t\tpadding: \"none\",\n\t\tseparator: \"without\",\n\t\tgap: \"none\"\n\t},\n\tcompoundVariants: [{\n\t\tbackground: \"none\",\n\t\tclass: \"bg-transparent\"\n\t}]\n});\n/* Available rounded corner sizes for the container /\nlet ContainerRoundedSize = / @__PURE__ / function(ContainerRoundedSize$1) {\n\tContainerRoundedSize$1[\"NONE\"] = \"none\";\n\tContainerRoundedSize$1[\"SM\"] = \"sm\";\n\tContainerRoundedSize$1[\"MD\"] = \"md\";\n\tContainerRoundedSize$1[\"LG\"] = \"lg\";\n\tContainerRoundedSize$1[\"XL\"] = \"xl\";\n\tContainerRoundedSize$1[\"2xl\"] = \"2xl\";\n\tContainerRoundedSize$1[\"3xl\"] = \"3xl\";\n\tContainerRoundedSize$1[\"4xl\"] = \"4xl\";\n\tContainerRoundedSize$1[\"5xl\"] = \"5xl\";\n\tContainerRoundedSize$1[\"FULL\"] = \"full\";\n\treturn ContainerRoundedSize$1;\n}({});\n/* Background transparency levels for the container /\nlet ContainerTransparency = / @__PURE__ / function(ContainerTransparency$1) {\n\tContainerTransparency$1[\"NONE\"] = \"none\";\n\tContainerTransparency$1[\"SM\"] = \"sm\";\n\tContainerTransparency$1[\"MD\"] = \"md\";\n\tContainerTransparency$1[\"LG\"] = \"lg\";\n\tContainerTransparency$1[\"XL\"] = \"xl\";\n\tContainerTransparency$1[\"FULL\"] = \"full\";\n\treturn ContainerTransparency$1;\n}({});\n/* Padding sizes for container content /\nlet ContainerPadding = / @__PURE__ / function(ContainerPadding$1) {\n\tContainerPadding$1[\"NONE\"] = \"none\";\n\tContainerPadding$1[\"SM\"] = \"sm\";\n\tContainerPadding$1[\"MD\"] = \"md\";\n\tContainerPadding$1[\"LG\"] = \"lg\";\n\tContainerPadding$1[\"XL\"] = \"xl\";\n\treturn ContainerPadding$1;\n}({});\n/* Separator options for dividing container children /\nlet ContainerSeparator = / @__PURE__ / function(ContainerSeparator$1) {\n\tContainerSeparator$1[\"WITHOUT\"] = \"without\";\n\tContainerSeparator$1[\"X\"] = \"x\";\n\tContainerSeparator$1[\"Y\"] = \"y\";\n\tContainerSeparator$1[\"BOTH\"] = \"both\";\n\treturn ContainerSeparator$1;\n}({});\n/* Border color options for the container /\nlet ContainerBorderColor = / @__PURE__ / function(ContainerBorderColor$1) {\n\tContainerBorderColor$1[\"PRIMARY\"] = \"primary\";\n\tContainerBorderColor$1[\"SECONDARY\"] = \"secondary\";\n\tContainerBorderColor$1[\"NEUTRAL\"] = \"neutral\";\n\tContainerBorderColor$1[\"TEXT\"] = \"text\";\n\tContainerBorderColor$1[\"ERROR\"] = \"error\";\n\tContainerBorderColor$1[\"WARNING\"] = \"warning\";\n\tContainerBorderColor$1[\"SUCCESS\"] = \"success\";\n\treturn ContainerBorderColor$1;\n}({});\n/* Background interaction states for the container /\nlet ContainerBackground = / @__PURE__ / function(ContainerBackground$1) {\n\tContainerBackground$1[\"NONE\"] = \"none\";\n\tContainerBackground$1[\"HOVERABLE\"] = \"hoverable\";\n\tContainerBackground$1[\"WITH\"] = \"with\";\n\treturn ContainerBackground$1;\n}({});\n/* Gap sizes between container children /\nlet ContainerGap = / @__PURE__ / function(ContainerGap$1) {\n\tContainerGap$1[\"NONE\"] = \"none\";\n\tContainerGap$1[\"SM\"] = \"sm\";\n\tContainerGap$1[\"MD\"] = \"md\";\n\tContainerGap$1[\"LG\"] = \"lg\";\n\tContainerGap$1[\"XL\"] = \"xl\";\n\tContainerGap$1[\"2xl\"] = \"2xl\";\n\treturn ContainerGap$1;\n}({});\n/\n Container Component\n\n A flexible container component for organizing content with customizable styling options.\n* Supports various visual states, layouts, and accessibility features.\n\n ## Features\n* - Flexible Layout: Supports different padding, gap, and separator options\n* - Visual Variants: Multiple background transparency levels and border styles\n* - Responsive Design: Configurable rounded corners and spacing\n* - Semantic HTML: Proper div element with extensible attributes\n\n ## Accessibility\n* - Inherits all standard div accessibility features\n* - Supports ARIA attributes through spread props\n* - Maintains proper semantic structure for screen readers\n\n @param children - The content to display inside the container\n* @param roundedSize - Border radius size (default: 'md')\n* @param transparency - Background transparency level (default: 'md')\n* @param padding - Internal padding size (default: 'none')\n* @param separator - Divider lines between children (default: 'without')\n* @param border - Whether to show border (default: false)\n* @param borderColor - Color of the border (default: 'text')\n* @param background - Background interaction behavior (default: 'none')\n* @param gap - Space between child elements (default: 'none')\n* @param className - Additional CSS classes\n* @param props - Additional HTML div attributes including ARIA attributes\n/\nconst Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap, ...props }) => / @__PURE__ */ jsx(\"div\", {\n\tclassName: cn(containerVariants({\n\t\troundedSize,\n\t\ttransparency,\n\t\tpadding,\n\t\tseparator,\n\t\tborder: typeof border === \"boolean\" ? border ? \"with\" : \"none\" : void 0,\n\t\tbackground,\n\t\tborderColor,\n\t\tgap\n\t}), className),\n\t...props,\n\tchildren\n});\n\n//#endregion\nexport { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants };\n//# sourceMappingURL=index.mjs.map"],"mappings":";;;;;;;;;AASA,MAAM,oBAAoB,IAAI,yCAAyC;CACtE,UAAU;EACT,aAAa;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;GACP,OAAO;GACP,MAAM;GACN;EACD,cAAc;GACb,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN;EACD,SAAS;GACR,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP;EACD,WAAW;GACV,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACN;EACD,QAAQ;GACP,MAAM;GACN,MAAM;GACN;EACD,aAAa;GACZ,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACT;EACD,YAAY;GACX,MAAM;GACN,WAAW;GACX,MAAM;GACN;EACD,KAAK;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP;EACD;CACD,iBAAiB;EAChB,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACL;CACD,kBAAkB,CAAC;EAClB,YAAY;EACZ,OAAO;EACP,CAAC;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGF,MAAM,aAAa,EAAE,UAAU,aAAa,SAAS,cAAc,WAAW,WAAW,QAAQ,aAAa,YAAY,KAAK,GAAG,YAA4B,oBAAI,OAAO;CACxK,WAAW,GAAG,kBAAkB;EAC/B;EACA;EACA;EACA;EACA,QAAQ,OAAO,WAAW,YAAY,SAAS,SAAS,SAAS,KAAK;EACtE;EACA;EACA;EACA,CAAC,EAAE,UAAU;CACd,GAAG;CACH;CACA,CAAC"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../components/Container/index.mjs"],"sourcesContent":["import { cn } from \"../../utils/cn.mjs\";\nimport { cva } from \"class-variance-authority\";\nimport { jsx } from \"react/jsx-runtime\";\n\n//#region src/components/Container/index.tsx\n/*\n Container component variants using class-variance-authority\n* Provides flexible styling options for background, padding, borders, and layout\n/\nconst containerVariants = cva(\"flex flex-col text-text backdrop-blur\", {\n\tvariants: {\n\t\troundedSize: {\n\t\t\tnone: \"rounded-none\",\n\t\t\tsm: \"rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md\",\n\t\t\tmd: \"rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg\",\n\t\t\tlg: \"rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\",\n\t\t\txl: \"rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl\",\n\t\t\t\"2xl\": \"rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\",\n\t\t\t\"3xl\": \"rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl\",\n\t\t\t\"4xl\": \"rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]\",\n\t\t\tfull: \"rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full\"\n\t\t},\n\t\ttransparency: {\n\t\t\tnone: \"bg-card\",\n\t\t\tsm: \"bg-card/90\",\n\t\t\tmd: \"bg-card/70\",\n\t\t\tlg: \"bg-card/40\",\n\t\t\txl: \"bg-card/20\",\n\t\t\tfull: \"\"\n\t\t},\n\t\tpadding: {\n\t\t\tnone: \"p-0\",\n\t\t\tsm: \"px-3 py-2\",\n\t\t\tmd: \"px-4 py-3\",\n\t\t\tlg: \"px-6 py-4\",\n\t\t\txl: \"px-8 py-6\",\n\t\t\t\"2xl\": \"px-10 py-8\"\n\t\t},\n\t\tseparator: {\n\t\t\twithout: \"\",\n\t\t\tx: \"divide-x divide-dashed divide-text/20\",\n\t\t\ty: \"divide-y divide-dashed divide-text/20\",\n\t\t\tboth: \"divide-x divide-y divide-dashed divide-text/20\"\n\t\t},\n\t\tborder: {\n\t\t\tnone: \"\",\n\t\t\twith: \"border-[1.3px]\"\n\t\t},\n\t\tborderColor: {\n\t\t\tprimary: \"border-primary\",\n\t\t\tsecondary: \"border-secondary\",\n\t\t\tneutral: \"border-neutral\",\n\t\t\tcard: \"border-card\",\n\t\t\ttext: \"border-text\",\n\t\t\terror: \"border-error\",\n\t\t\twarning: \"border-warning\",\n\t\t\tsuccess: \"border-success\"\n\t\t},\n\t\tbackground: {\n\t\t\tnone: \"\",\n\t\t\thoverable: \"bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur\",\n\t\t\twith: \"\"\n\t\t},\n\t\tgap: {\n\t\t\tnone: \"gap-0\",\n\t\t\tsm: \"gap-1\",\n\t\t\tmd: \"gap-3\",\n\t\t\tlg: \"gap-5\",\n\t\t\txl: \"gap-8\",\n\t\t\t\"2xl\": \"gap-10\"\n\t\t}\n\t},\n\tdefaultVariants: {\n\t\troundedSize: \"lg\",\n\t\tborder: \"none\",\n\t\tborderColor: \"text\",\n\t\ttransparency: \"md\",\n\t\tpadding: \"none\",\n\t\tseparator: \"without\",\n\t\tgap: \"none\"\n\t},\n\tcompoundVariants: [{\n\t\tbackground: \"none\",\n\t\tclass: \"bg-transparent\"\n\t}]\n});\n/* Available rounded corner sizes for the container /\nlet ContainerRoundedSize = / @__PURE__ / function(ContainerRoundedSize$1) {\n\tContainerRoundedSize$1[\"NONE\"] = \"none\";\n\tContainerRoundedSize$1[\"SM\"] = \"sm\";\n\tContainerRoundedSize$1[\"MD\"] = \"md\";\n\tContainerRoundedSize$1[\"LG\"] = \"lg\";\n\tContainerRoundedSize$1[\"XL\"] = \"xl\";\n\tContainerRoundedSize$1[\"2xl\"] = \"2xl\";\n\tContainerRoundedSize$1[\"3xl\"] = \"3xl\";\n\tContainerRoundedSize$1[\"4xl\"] = \"4xl\";\n\tContainerRoundedSize$1[\"5xl\"] = \"5xl\";\n\tContainerRoundedSize$1[\"FULL\"] = \"full\";\n\treturn ContainerRoundedSize$1;\n}({});\n/* Background transparency levels for the container /\nlet ContainerTransparency = / @__PURE__ / function(ContainerTransparency$1) {\n\tContainerTransparency$1[\"NONE\"] = \"none\";\n\tContainerTransparency$1[\"SM\"] = \"sm\";\n\tContainerTransparency$1[\"MD\"] = \"md\";\n\tContainerTransparency$1[\"LG\"] = \"lg\";\n\tContainerTransparency$1[\"XL\"] = \"xl\";\n\tContainerTransparency$1[\"FULL\"] = \"full\";\n\treturn ContainerTransparency$1;\n}({});\n/* Padding sizes for container content /\nlet ContainerPadding = / @__PURE__ / function(ContainerPadding$1) {\n\tContainerPadding$1[\"NONE\"] = \"none\";\n\tContainerPadding$1[\"SM\"] = \"sm\";\n\tContainerPadding$1[\"MD\"] = \"md\";\n\tContainerPadding$1[\"LG\"] = \"lg\";\n\tContainerPadding$1[\"XL\"] = \"xl\";\n\treturn ContainerPadding$1;\n}({});\n/* Separator options for dividing container children /\nlet ContainerSeparator = / @__PURE__ / function(ContainerSeparator$1) {\n\tContainerSeparator$1[\"WITHOUT\"] = \"without\";\n\tContainerSeparator$1[\"X\"] = \"x\";\n\tContainerSeparator$1[\"Y\"] = \"y\";\n\tContainerSeparator$1[\"BOTH\"] = \"both\";\n\treturn ContainerSeparator$1;\n}({});\n/* Border color options for the container /\nlet ContainerBorderColor = / @__PURE__ / function(ContainerBorderColor$1) {\n\tContainerBorderColor$1[\"PRIMARY\"] = \"primary\";\n\tContainerBorderColor$1[\"SECONDARY\"] = \"secondary\";\n\tContainerBorderColor$1[\"NEUTRAL\"] = \"neutral\";\n\tContainerBorderColor$1[\"TEXT\"] = \"text\";\n\tContainerBorderColor$1[\"ERROR\"] = \"error\";\n\tContainerBorderColor$1[\"WARNING\"] = \"warning\";\n\tContainerBorderColor$1[\"SUCCESS\"] = \"success\";\n\treturn ContainerBorderColor$1;\n}({});\n/* Background interaction states for the container /\nlet ContainerBackground = / @__PURE__ / function(ContainerBackground$1) {\n\tContainerBackground$1[\"NONE\"] = \"none\";\n\tContainerBackground$1[\"HOVERABLE\"] = \"hoverable\";\n\tContainerBackground$1[\"WITH\"] = \"with\";\n\treturn ContainerBackground$1;\n}({});\n/* Gap sizes between container children /\nlet ContainerGap = / @__PURE__ / function(ContainerGap$1) {\n\tContainerGap$1[\"NONE\"] = \"none\";\n\tContainerGap$1[\"SM\"] = \"sm\";\n\tContainerGap$1[\"MD\"] = \"md\";\n\tContainerGap$1[\"LG\"] = \"lg\";\n\tContainerGap$1[\"XL\"] = \"xl\";\n\tContainerGap$1[\"2xl\"] = \"2xl\";\n\treturn ContainerGap$1;\n}({});\n/\n Container Component\n\n A flexible container component for organizing content with customizable styling options.\n* Supports various visual states, layouts, and accessibility features.\n\n ## Features\n* - Flexible Layout: Supports different padding, gap, and separator options\n* - Visual Variants: Multiple background transparency levels and border styles\n* - Responsive Design: Configurable rounded corners and spacing\n* - Semantic HTML: Proper div element with extensible attributes\n\n ## Accessibility\n* - Inherits all standard div accessibility features\n* - Supports ARIA attributes through spread props\n* - Maintains proper semantic structure for screen readers\n\n @param children - The content to display inside the container\n* @param roundedSize - Border radius size (default: 'md')\n* @param transparency - Background transparency level (default: 'md')\n* @param padding - Internal padding size (default: 'none')\n* @param separator - Divider lines between children (default: 'without')\n* @param border - Whether to show border (default: false)\n* @param borderColor - Color of the border (default: 'text')\n* @param background - Background interaction behavior (default: 'none')\n* @param gap - Space between child elements (default: 'none')\n* @param className - Additional CSS classes\n* @param props - Additional HTML div attributes including ARIA attributes\n/\nconst Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap, ...props }) => / @__PURE__ */ jsx(\"div\", {\n\tclassName: cn(containerVariants({\n\t\troundedSize,\n\t\ttransparency,\n\t\tpadding,\n\t\tseparator,\n\t\tborder: typeof border === \"boolean\" ? border ? \"with\" : \"none\" : void 0,\n\t\tbackground,\n\t\tborderColor,\n\t\tgap\n\t}), className),\n\t...props,\n\tchildren\n});\n\n//#endregion\nexport { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants };\n//# sourceMappingURL=index.mjs.map"],"mappings":";;;;;;;;;AASA,MAAM,oBAAoB,IAAI,yCAAyC;CACtE,UAAU;EACT,aAAa;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;GACP,OAAO;GACP,MAAM;GACN;EACD,cAAc;GACb,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN;EACD,SAAS;GACR,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP;EACD,WAAW;GACV,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACN;EACD,QAAQ;GACP,MAAM;GACN,MAAM;GACN;EACD,aAAa;GACZ,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACT;EACD,YAAY;GACX,MAAM;GACN,WAAW;GACX,MAAM;GACN;EACD,KAAK;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP;EACD;CACD,iBAAiB;EAChB,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACL;CACD,kBAAkB,CAAC;EAClB,YAAY;EACZ,OAAO;EACP,CAAC;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGF,MAAM,aAAa,EAAE,UAAU,aAAa,SAAS,cAAc,WAAW,WAAW,QAAQ,aAAa,YAAY,KAAK,GAAG,YAA4B,oBAAI,OAAO;CACxK,WAAW,GAAG,kBAAkB;EAC/B;EACA;EACA;EACA;EACA,QAAQ,OAAO,WAAW,YAAY,SAAS,SAAS,SAAS,KAAK;EACtE;EACA;EACA;EACA,CAAC,EAAE,UAAU;CACd,GAAG;CACH;CACA,CAAC"}

package/dist/esm/hooks/index.mjs CHANGED Viewed

@@ -1,22 +1,22 @@
+import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
 import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
 import { useSession } from "./useAuth/useSession.mjs";
 import { useAuth } from "./useAuth/useAuth.mjs";
 import { useIntlayerAuth, useIntlayerOAuth } from "./useIntlayerAPI.mjs";
 import { useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditTag, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeletePasskey, useDeleteProject, useDeleteSSOProvider, useDeleteTag, useDeleteUser, useDisableTwoFactor, useEnableTwoFactor, useGetCIConfig, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetNewsletterStatus, useGetOrganizations, useGetPricing, useGetProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useInfiniteGetDictionaries, useListPasskeys, useListSSOProviders, useLogin, useLogout, usePushCIConfig, usePushDictionaries, useQueryClient, useRefreshAccessKey, useRegister, useRegisterSSO, useResetPassword, useSearchDoc, useSelectOrganization, useSelectProject, useSignInMagicLink, useSignInPasskey, useSignInSSO, useSubscribeToNewsletter, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateTag, useUpdateUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary } from "./reactQuery.mjs";
-import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
+import { usePersistedStore } from "./usePersistedStore.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
+import { useUser } from "./useUser/index.mjs";
+import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
 import { useGetElementById } from "./useGetElementById.mjs";
 import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
 import { useIsDarkMode } from "./useIsDarkMode.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
 import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
-import { usePersistedStore } from "./usePersistedStore.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
 import { useScrollY } from "./useScrollY.mjs";
 import { useSearch } from "./useSearch.mjs";
-import { useUser } from "./useUser/index.mjs";
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditTag, useAuth, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeletePasskey, useDeleteProject, useDeleteSSOProvider, useDeleteTag, useDeleteUser, useDevice, useDisableTwoFactor, useEnableTwoFactor, useGetCIConfig, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetElementById, useGetElementOrWindow, useGetNewsletterStatus, useGetOrganizations, useGetPricing, useGetProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useHorizontalSwipe, useInfiniteGetDictionaries, useIntlayerAuth, useIntlayerOAuth, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, useListPasskeys, useListSSOProviders, useLogin, useLogout, useOAuth2, usePersistedStore, usePushCIConfig, usePushDictionaries, useQueryClient, useRefreshAccessKey, useRegister, useRegisterSSO, useResetPassword, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useSearchDoc, useSelectOrganization, useSelectProject, useSession, useSignInMagicLink, useSignInPasskey, useSignInSSO, useSubscribeToNewsletter, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateTag, useUpdateUser, useUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };

package/dist/esm/hooks/useHorizontalSwipe.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useHorizontalSwipe.mjs","names":["onPointerDown: PointerEventHandler<HTMLDivElement>","onPointerMove: PointerEventHandler<HTMLDivElement>","onPointerUp: PointerEventHandler<HTMLDivElement>","onPointerCancel: PointerEventHandler<HTMLDivElement>"],"sources":["../../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n type CSSProperties,\n type PointerEvent,\n type PointerEventHandler,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nexport type HorizontalSwipeConfig = {\n onSwipeLeft?: () => void; // move to next item\n onSwipeRight?: () => void; // move to previous item\n enable?: boolean;\n itemIndex: number;\n itemCount: number;\n thresholdPct?: number; // percentage of width required to trigger\n touchAction?: string; // CSS touch-action for the container, defaults to 'pan-y'\n disableWhenSelectingText?: boolean; // if true, do not swipe while text selection is active\n};\n\nexport type HorizontalSwipeHook = {\n containerRef: RefObject<HTMLDivElement>;\n isDragging: boolean;\n dragDeltaPct: number;\n containerProps: {\n ref: RefObject<HTMLDivElement>;\n onPointerDown: PointerEventHandler<HTMLDivElement>;\n onPointerMove: PointerEventHandler<HTMLDivElement>;\n onPointerUp: PointerEventHandler<HTMLDivElement>;\n onPointerCancel: PointerEventHandler<HTMLDivElement>;\n style: CSSProperties;\n };\n};\n\nexport const useHorizontalSwipe = (\n config: HorizontalSwipeConfig\n): HorizontalSwipeHook => {\n const {\n enable = true,\n onSwipeLeft,\n onSwipeRight,\n itemIndex,\n itemCount,\n thresholdPct = 20,\n touchAction = 'pan-y',\n disableWhenSelectingText = true,\n } = config;\n\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [dragDeltaPct, setDragDeltaPct] = useState(0);\n const pointerStateRef = useRef<{\n pointerId: number \| null;\n startX: number;\n startY: number;\n lastX: number;\n axisLocked: boolean;\n isHorizontal: boolean;\n }>({\n pointerId: null,\n startX: 0,\n startY: 0,\n lastX: 0,\n axisLocked: false,\n isHorizontal: false,\n });\n\n const isTextSelectingRef = useRef<boolean>(false);\n\n const getContainerWidth = () => {\n const node = containerRef.current;\n return node ? node.clientWidth : 0;\n };\n\n const applyEdgeResistance = (pct: number) => {\n const atFirst = itemIndex <= 0;\n const atLast = itemIndex >= itemCount - 1;\n\n if ((atFirst && pct > 0) \|\| (atLast && pct < 0)) {\n const magnitude = Math.abs(pct);\n const resistance = 1 + magnitude / 30;\n return pct / resistance;\n }\n\n return pct;\n };\n\n const onPointerDown: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== null) return;\n pointerStateRef.current.pointerId = e.pointerId;\n pointerStateRef.current.startX = e.clientX;\n pointerStateRef.current.startY = e.clientY;\n pointerStateRef.current.lastX = e.clientX;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n isTextSelectingRef.current = false;\n setIsDragging(false);\n setDragDeltaPct(0);\n };\n\n const onPointerMove: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n\n const width = getContainerWidth();\n if (!width) return;\n\n const dx = e.clientX - pointerStateRef.current.startX;\n const dy = e.clientY - pointerStateRef.current.startY;\n\n // If user is selecting text, do not engage swipe\n if (disableWhenSelectingText) {\n const sel =\n typeof window !== 'undefined' ? window.getSelection?.() : null;\n const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;\n if (isSelecting) {\n isTextSelectingRef.current = true;\n return;\n }\n }\n\n if (!pointerStateRef.current.axisLocked) {\n const absDx = Math.abs(dx);\n const absDy = Math.abs(dy);\n if (absDx > 6 \|\| absDy > 6) {\n pointerStateRef.current.axisLocked = true;\n pointerStateRef.current.isHorizontal = absDx > absDy;\n }\n }\n\n if (!pointerStateRef.current.isHorizontal) {\n return;\n }\n\n // Defer pointer capture until a horizontal gesture is confirmed\n try {\n (\n e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n ).setPointerCapture(e.pointerId);\n } catch {}\n\n e.preventDefault();\n\n if (!isDragging) setIsDragging(true);\n\n const pct = (dx / width) * 100;\n setDragDeltaPct(applyEdgeResistance(pct));\n pointerStateRef.current.lastX = e.clientX;\n };\n\n const endDrag = (e: PointerEvent<HTMLDivElement>) => {\n try {\n (\n e.currentTarget as Element & {\n releasePointerCapture: (id: number) => void;\n }\n ).releasePointerCapture(e.pointerId);\n } catch {}\n\n const wasHorizontal = pointerStateRef.current.isHorizontal;\n const delta = dragDeltaPct;\n\n setIsDragging(false);\n setDragDeltaPct(0);\n pointerStateRef.current.pointerId = null;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n\n if (isTextSelectingRef.current) {\n isTextSelectingRef.current = false;\n return;\n }\n\n if (!wasHorizontal) return;\n\n if (delta > thresholdPct) {\n onSwipeRight?.();\n } else if (delta < -thresholdPct) {\n onSwipeLeft?.();\n }\n };\n\n const onPointerUp: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n const onPointerCancel: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n useEffect(() => {\n setDragDeltaPct(0);\n setIsDragging(false);\n }, [itemIndex]);\n\n const style: CSSProperties = { touchAction };\n\n return {\n containerRef: containerRef as RefObject<HTMLDivElement>,\n isDragging,\n dragDeltaPct,\n containerProps: {\n ref: containerRef as RefObject<HTMLDivElement>,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onPointerCancel,\n style,\n },\n };\n};\n"],"mappings":";;;;;AAqCA,MAAa,sBACX,WACwB;CACxB,MAAM,EACJ,SAAS,MACT,aACA,cACA,WACA,WACA,eAAe,IACf,cAAc,SACd,2BAA2B,SACzB;CAEJ,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,kBAAkB,OAOrB;EACD,WAAW;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,YAAY;EACZ,cAAc;EACf,CAAC;CAEF,MAAM,qBAAqB,OAAgB,MAAM;CAEjD,MAAM,0BAA0B;EAC9B,MAAM,OAAO,aAAa;AAC1B,SAAO,OAAO,KAAK,cAAc;;CAGnC,MAAM,uBAAuB,QAAgB;EAC3C,MAAM,UAAU,aAAa;EAC7B,MAAM,SAAS,aAAa,YAAY;AAExC,MAAK,WAAW,MAAM,KAAO,UAAU,MAAM,EAG3C,QAAO,OADY,IADD,KAAK,IAAI,IAAI,GACI;AAIrC,SAAO;;CAGT,~~MAAMA~~,iBAAsD,MAAM;AAChE,MAAI,CAAC,OAAQ;AACb,MAAI,gBAAgB,QAAQ,cAAc,KAAM;AAChD,kBAAgB,QAAQ,YAAY,EAAE;AACtC,kBAAgB,QAAQ,SAAS,EAAE;AACnC,kBAAgB,QAAQ,SAAS,EAAE;AACnC,kBAAgB,QAAQ,QAAQ,EAAE;AAClC,kBAAgB,QAAQ,aAAa;AACrC,kBAAgB,QAAQ,eAAe;AACvC,qBAAmB,UAAU;AAC7B,gBAAc,MAAM;AACpB,kBAAgB,EAAE;;CAGpB,~~MAAMC~~,iBAAsD,MAAM;AAChE,MAAI,CAAC,OAAQ;AACb,MAAI,gBAAgB,QAAQ,cAAc,EAAE,UAAW;EAEvD,MAAM,QAAQ,mBAAmB;AACjC,MAAI,CAAC,MAAO;EAEZ,MAAM,KAAK,EAAE,UAAU,gBAAgB,QAAQ;EAC/C,MAAM,KAAK,EAAE,UAAU,gBAAgB,QAAQ;AAG/C,MAAI,0BAA0B;GAC5B,MAAM,MACJ,OAAO,WAAW,cAAc,OAAO,gBAAgB,GAAG;AAE5D,OADoB,CAAC,CAAC,OAAO,IAAI,aAAa,KAAK,CAAC,IAAI,aACvC;AACf,uBAAmB,UAAU;AAC7B;;;AAIJ,MAAI,CAAC,gBAAgB,QAAQ,YAAY;GACvC,MAAM,QAAQ,KAAK,IAAI,GAAG;GAC1B,MAAM,QAAQ,KAAK,IAAI,GAAG;AAC1B,OAAI,QAAQ,KAAK,QAAQ,GAAG;AAC1B,oBAAgB,QAAQ,aAAa;AACrC,oBAAgB,QAAQ,eAAe,QAAQ;;;AAInD,MAAI,CAAC,gBAAgB,QAAQ,aAC3B;AAIF,MAAI;AACF,GACE,EAAE,cACF,kBAAkB,EAAE,UAAU;UAC1B;AAER,IAAE,gBAAgB;AAElB,MAAI,CAAC,WAAY,eAAc,KAAK;AAGpC,kBAAgB,oBADH,KAAK,QAAS,IACa,CAAC;AACzC,kBAAgB,QAAQ,QAAQ,EAAE;;CAGpC,MAAM,WAAW,MAAoC;AACnD,MAAI;AACF,GACE,EAAE,cAGF,sBAAsB,EAAE,UAAU;UAC9B;EAER,MAAM,gBAAgB,gBAAgB,QAAQ;EAC9C,MAAM,QAAQ;AAEd,gBAAc,MAAM;AACpB,kBAAgB,EAAE;AAClB,kBAAgB,QAAQ,YAAY;AACpC,kBAAgB,QAAQ,aAAa;AACrC,kBAAgB,QAAQ,eAAe;AAEvC,MAAI,mBAAmB,SAAS;AAC9B,sBAAmB,UAAU;AAC7B;;AAGF,MAAI,CAAC,cAAe;AAEpB,MAAI,QAAQ,aACV,iBAAgB;WACP,QAAQ,CAAC,aAClB,gBAAe;;CAInB,~~MAAMC~~,eAAoD,MAAM;AAC9D,MAAI,CAAC,OAAQ;AACb,MAAI,gBAAgB,QAAQ,cAAc,EAAE,UAAW;AACvD,UAAQ,EAAE;;CAGZ,~~MAAMC~~,mBAAwD,MAAM;AAClE,MAAI,CAAC,OAAQ;AACb,MAAI,gBAAgB,QAAQ,cAAc,EAAE,UAAW;AACvD,UAAQ,EAAE;;AAGZ,iBAAgB;AACd,kBAAgB,EAAE;AAClB,gBAAc,MAAM;IACnB,CAAC,UAAU,CAAC;AAIf,QAAO;EACS;EACd;EACA;EACA,gBAAgB;GACd,KAAK;GACL;GACA;GACA;GACA;GACA,OAZyB,EAAE,aAAa;GAazC;EACF"}
1	+ {"version":3,"file":"useHorizontalSwipe.mjs","names":[],"sources":["../../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n type CSSProperties,\n type PointerEvent,\n type PointerEventHandler,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nexport type HorizontalSwipeConfig = {\n onSwipeLeft?: () => void; // move to next item\n onSwipeRight?: () => void; // move to previous item\n enable?: boolean;\n itemIndex: number;\n itemCount: number;\n thresholdPct?: number; // percentage of width required to trigger\n touchAction?: string; // CSS touch-action for the container, defaults to 'pan-y'\n disableWhenSelectingText?: boolean; // if true, do not swipe while text selection is active\n};\n\nexport type HorizontalSwipeHook = {\n containerRef: RefObject<HTMLDivElement>;\n isDragging: boolean;\n dragDeltaPct: number;\n containerProps: {\n ref: RefObject<HTMLDivElement>;\n onPointerDown: PointerEventHandler<HTMLDivElement>;\n onPointerMove: PointerEventHandler<HTMLDivElement>;\n onPointerUp: PointerEventHandler<HTMLDivElement>;\n onPointerCancel: PointerEventHandler<HTMLDivElement>;\n style: CSSProperties;\n };\n};\n\nexport const useHorizontalSwipe = (\n config: HorizontalSwipeConfig\n): HorizontalSwipeHook => {\n const {\n enable = true,\n onSwipeLeft,\n onSwipeRight,\n itemIndex,\n itemCount,\n thresholdPct = 20,\n touchAction = 'pan-y',\n disableWhenSelectingText = true,\n } = config;\n\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const [isDragging, setIsDragging] = useState(false);\n const [dragDeltaPct, setDragDeltaPct] = useState(0);\n const pointerStateRef = useRef<{\n pointerId: number \| null;\n startX: number;\n startY: number;\n lastX: number;\n axisLocked: boolean;\n isHorizontal: boolean;\n }>({\n pointerId: null,\n startX: 0,\n startY: 0,\n lastX: 0,\n axisLocked: false,\n isHorizontal: false,\n });\n\n const isTextSelectingRef = useRef<boolean>(false);\n\n const getContainerWidth = () => {\n const node = containerRef.current;\n return node ? node.clientWidth : 0;\n };\n\n const applyEdgeResistance = (pct: number) => {\n const atFirst = itemIndex <= 0;\n const atLast = itemIndex >= itemCount - 1;\n\n if ((atFirst && pct > 0) \|\| (atLast && pct < 0)) {\n const magnitude = Math.abs(pct);\n const resistance = 1 + magnitude / 30;\n return pct / resistance;\n }\n\n return pct;\n };\n\n const onPointerDown: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== null) return;\n pointerStateRef.current.pointerId = e.pointerId;\n pointerStateRef.current.startX = e.clientX;\n pointerStateRef.current.startY = e.clientY;\n pointerStateRef.current.lastX = e.clientX;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n isTextSelectingRef.current = false;\n setIsDragging(false);\n setDragDeltaPct(0);\n };\n\n const onPointerMove: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n\n const width = getContainerWidth();\n if (!width) return;\n\n const dx = e.clientX - pointerStateRef.current.startX;\n const dy = e.clientY - pointerStateRef.current.startY;\n\n // If user is selecting text, do not engage swipe\n if (disableWhenSelectingText) {\n const sel =\n typeof window !== 'undefined' ? window.getSelection?.() : null;\n const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;\n if (isSelecting) {\n isTextSelectingRef.current = true;\n return;\n }\n }\n\n if (!pointerStateRef.current.axisLocked) {\n const absDx = Math.abs(dx);\n const absDy = Math.abs(dy);\n if (absDx > 6 \|\| absDy > 6) {\n pointerStateRef.current.axisLocked = true;\n pointerStateRef.current.isHorizontal = absDx > absDy;\n }\n }\n\n if (!pointerStateRef.current.isHorizontal) {\n return;\n }\n\n // Defer pointer capture until a horizontal gesture is confirmed\n try {\n (\n e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n ).setPointerCapture(e.pointerId);\n } catch {}\n\n e.preventDefault();\n\n if (!isDragging) setIsDragging(true);\n\n const pct = (dx / width) * 100;\n setDragDeltaPct(applyEdgeResistance(pct));\n pointerStateRef.current.lastX = e.clientX;\n };\n\n const endDrag = (e: PointerEvent<HTMLDivElement>) => {\n try {\n (\n e.currentTarget as Element & {\n releasePointerCapture: (id: number) => void;\n }\n ).releasePointerCapture(e.pointerId);\n } catch {}\n\n const wasHorizontal = pointerStateRef.current.isHorizontal;\n const delta = dragDeltaPct;\n\n setIsDragging(false);\n setDragDeltaPct(0);\n pointerStateRef.current.pointerId = null;\n pointerStateRef.current.axisLocked = false;\n pointerStateRef.current.isHorizontal = false;\n\n if (isTextSelectingRef.current) {\n isTextSelectingRef.current = false;\n return;\n }\n\n if (!wasHorizontal) return;\n\n if (delta > thresholdPct) {\n onSwipeRight?.();\n } else if (delta < -thresholdPct) {\n onSwipeLeft?.();\n }\n };\n\n const onPointerUp: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n const onPointerCancel: PointerEventHandler<HTMLDivElement> = (e) => {\n if (!enable) return;\n if (pointerStateRef.current.pointerId !== e.pointerId) return;\n endDrag(e);\n };\n\n useEffect(() => {\n setDragDeltaPct(0);\n setIsDragging(false);\n }, [itemIndex]);\n\n const style: CSSProperties = { touchAction };\n\n return {\n containerRef: containerRef as RefObject<HTMLDivElement>,\n isDragging,\n dragDeltaPct,\n containerProps: {\n ref: containerRef as RefObject<HTMLDivElement>,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onPointerCancel,\n style,\n },\n };\n};\n"],"mappings":"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"}

package/dist/esm/hooks/useItemSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useItemSelector.mjs","names":[~~"targetElement: HTMLElement \| null","newPosition: VerticalStyleState","newPosition: HorizontalStyleState","mutationObservers: MutationObserver[~~]","~~resizeObservers: ResizeObserver[]"],"~~sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' \| 'vertical';\n\ntype HorizontalStyleState = {\n left: number;\n width: number;\n opacity: number;\n};\n\ntype VerticalStyleState = {\n top: number;\n height: number;\n opacity: number;\n};\n\ntype StyleState = HorizontalStyleState \| VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n selector?: (option: HTMLElement, index: number) => boolean;\n isHoverable?: boolean;\n orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n optionsRefs: RefObject<HTMLElement[]>,\n {\n selector = selectorDefault,\n isHoverable = false,\n orientation = 'horizontal',\n }: Options = {\n selector: selectorDefault,\n isHoverable: false,\n orientation: 'horizontal',\n }\n) => {\n const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n useState<StyleState \| null>(null);\n\n const [hoveredItem, setHoveredItem] = useState<HTMLElement \| null>(null);\n const hideTimeoutRef = useRef<NodeJS.Timeout \| null>(null);\n const lastPositionRef = useRef<StyleState \| null>(null);\n\n const itemsLength = optionsRefs.current.length;\n\n const calculatePosition = () => {\n let targetElement: HTMLElement \| null = null;\n\n if (hoveredItem) {\n targetElement = hoveredItem;\n // Clear any pending hide timeout when hovering over an item\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n } else {\n targetElement = optionsRefs.current.find(selector) ?? null;\n }\n\n if (!targetElement) {\n // Keep previous position but set opacity to 0\n if (orientation === 'vertical') {\n setChoiceIndicatorPosition((prev) => {\n const verticalPrev = prev as VerticalStyleState \| null;\n const newPosition: VerticalStyleState = {\n top: verticalPrev?.top ?? 0,\n height: verticalPrev?.height ?? 0,\n opacity: 0,\n };\n lastPositionRef.current = newPosition;\n return newPosition;\n });\n } else {\n setChoiceIndicatorPosition((prev) => {\n const horizontalPrev = prev as HorizontalStyleState \| null;\n const newPosition: HorizontalStyleState = {\n left: horizontalPrev?.left ?? 0,\n width: horizontalPrev?.width ?? 0,\n opacity: 0,\n };\n lastPositionRef.current = newPosition;\n return newPosition;\n });\n }\n return;\n }\n\n if (orientation === 'vertical') {\n const top = targetElement.offsetTop;\n const height = targetElement.offsetHeight;\n\n const newPosition = {\n top,\n height,\n opacity: 1,\n };\n setChoiceIndicatorPosition(newPosition);\n lastPositionRef.current = newPosition;\n } else {\n const left = targetElement.offsetLeft;\n const width = targetElement.offsetWidth;\n\n const newPosition = {\n left,\n width,\n opacity: 1,\n };\n setChoiceIndicatorPosition(newPosition);\n lastPositionRef.current = newPosition;\n }\n };\n\n useEffect(() => {\n calculatePosition();\n\n // Event listeners for window events\n window.addEventListener('resize', calculatePosition);\n window.addEventListener('DOMContentLoaded', calculatePosition);\n\n // MutationObserver to watch for 'aria-selected' changes\n const mutationObservers: MutationObserver[] = [];\n\n optionsRefs.current.forEach((option) => {\n if (option) {\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'aria-selected'\n ) {\n calculatePosition();\n break;\n }\n }\n });\n\n observer.observe(option, {\n attributes: true,\n attributeFilter: ['aria-selected'],\n });\n\n mutationObservers.push(observer);\n }\n });\n\n // ResizeObserver to watch for size changes\n const resizeObservers: ResizeObserver[] = [];\n\n const observeSize = (element: HTMLElement) => {\n if (!element) return;\n const resizeObserver = new ResizeObserver(() => {\n calculatePosition();\n });\n resizeObserver.observe(element);\n resizeObservers.push(resizeObserver);\n };\n\n // Observe the selected item\n const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n if (selectedItem) {\n observeSize(selectedItem);\n }\n\n // Observe the hovered item\n if (hoveredItem) {\n observeSize(hoveredItem);\n }\n\n // Add hover event listeners\n const handleMouseEnter = (event: Event) => {\n // Clear any pending hide timeout\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n setHoveredItem(event.currentTarget as HTMLElement);\n };\n\n const handleMouseLeave = () => {\n // Clear any existing timeout\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n }\n\n // Keep the indicator at its current position for 150ms\n // before removing the hovered item\n hideTimeoutRef.current = setTimeout(() => {\n setHoveredItem(null);\n }, 150); // 150ms delay before hiding\n };\n\n if (isHoverable) {\n optionsRefs.current.forEach((option) => {\n option?.addEventListener('mouseenter', handleMouseEnter, {\n passive: true,\n });\n option?.addEventListener('mouseleave', handleMouseLeave, {\n passive: true,\n });\n });\n }\n\n return () => {\n // Clear any pending hide timeout\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n }\n\n // Cleanup window event listeners\n window.removeEventListener('resize', calculatePosition);\n window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n // Disconnect MutationObservers\n mutationObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Disconnect ResizeObservers\n resizeObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Remove hover event listeners\n optionsRefs.current.forEach((option) => {\n option?.removeEventListener('mouseenter', handleMouseEnter);\n option?.removeEventListener('mouseleave', handleMouseLeave);\n });\n };\n }, [optionsRefs, selector, hoveredItem, itemsLength, orientation]);\n\n return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":";;;;;AAoBA,MAAM,mBAAmB,WACvB,QAAQ,aAAa,gBAAgB,KAAK;AAQ5C,MAAa,mBACX,aACA,EACE,WAAW,iBACX,cAAc,OACd,cAAc,iBACH;CACX,UAAU;CACV,aAAa;CACb,aAAa;CACd,KACE;CACH,MAAM,CAAC,yBAAyB,8BAC9B,SAA4B,KAAK;CAEnC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,KAAK;CACxE,MAAM,iBAAiB,OAA8B,KAAK;CAC1D,MAAM,kBAAkB,OAA0B,KAAK;CAEvD,MAAM,cAAc,YAAY,QAAQ;CAExC,MAAM,0BAA0B;EAC9B,~~IAAIA~~,gBAAoC;AAExC,MAAI,aAAa;AACf,mBAAgB;AAEhB,OAAI,eAAe,SAAS;AAC1B,iBAAa,eAAe,QAAQ;AACpC,mBAAe,UAAU;;QAG3B,iBAAgB,YAAY,QAAQ,KAAK,SAAS,IAAI;AAGxD,MAAI,CAAC,eAAe;AAElB,OAAI,gBAAgB,WAClB,6BAA4B,SAAS;IACnC,MAAM,eAAe;IACrB,~~MAAMC~~,cAAkC;KACtC,KAAK,cAAc,OAAO;KAC1B,QAAQ,cAAc,UAAU;KAChC,SAAS;KACV;AACD,oBAAgB,UAAU;AAC1B,WAAO;KACP;OAEF,6BAA4B,SAAS;IACnC,MAAM,iBAAiB;IACvB,~~MAAMC~~,cAAoC;KACxC,MAAM,gBAAgB,QAAQ;KAC9B,OAAO,gBAAgB,SAAS;KAChC,SAAS;KACV;AACD,oBAAgB,UAAU;AAC1B,WAAO;KACP;AAEJ;;AAGF,MAAI,gBAAgB,YAAY;GAI9B,MAAM,cAAc;IAClB,KAJU,cAAc;IAKxB,QAJa,cAAc;IAK3B,SAAS;IACV;AACD,8BAA2B,YAAY;AACvC,mBAAgB,UAAU;SACrB;GAIL,MAAM,cAAc;IAClB,MAJW,cAAc;IAKzB,OAJY,cAAc;IAK1B,SAAS;IACV;AACD,8BAA2B,YAAY;AACvC,mBAAgB,UAAU;;;AAI9B,iBAAgB;AACd,qBAAmB;AAGnB,SAAO,iBAAiB,UAAU,kBAAkB;AACpD,SAAO,iBAAiB,oBAAoB,kBAAkB;EAG9D,~~MAAMC~~,oBAAwC,EAAE;AAEhD,cAAY,QAAQ,SAAS,WAAW;AACtC,OAAI,QAAQ;IACV,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACnD,UAAK,MAAM,YAAY,UACrB,KACE,SAAS,SAAS,gBAClB,SAAS,kBAAkB,iBAC3B;AACA,yBAAmB;AACnB;;MAGJ;AAEF,aAAS,QAAQ,QAAQ;KACvB,YAAY;KACZ,iBAAiB,CAAC,gBAAgB;KACnC,CAAC;AAEF,sBAAkB,KAAK,SAAS;;IAElC;EAGF,~~MAAMC~~,kBAAoC,EAAE;EAE5C,MAAM,eAAe,YAAyB;AAC5C,OAAI,CAAC,QAAS;GACd,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,uBAAmB;KACnB;AACF,kBAAe,QAAQ,QAAQ;AAC/B,mBAAgB,KAAK,eAAe;;EAItC,MAAM,eAAe,YAAY,QAAQ,KAAK,SAAS,IAAI;AAE3D,MAAI,aACF,aAAY,aAAa;AAI3B,MAAI,YACF,aAAY,YAAY;EAI1B,MAAM,oBAAoB,UAAiB;AAEzC,OAAI,eAAe,SAAS;AAC1B,iBAAa,eAAe,QAAQ;AACpC,mBAAe,UAAU;;AAE3B,kBAAe,MAAM,cAA6B;;EAGpD,MAAM,yBAAyB;AAE7B,OAAI,eAAe,QACjB,cAAa,eAAe,QAAQ;AAKtC,kBAAe,UAAU,iBAAiB;AACxC,mBAAe,KAAK;MACnB,IAAI;;AAGT,MAAI,YACF,aAAY,QAAQ,SAAS,WAAW;AACtC,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;AACF,WAAQ,iBAAiB,cAAc,kBAAkB,EACvD,SAAS,MACV,CAAC;IACF;AAGJ,eAAa;AAEX,OAAI,eAAe,QACjB,cAAa,eAAe,QAAQ;AAItC,UAAO,oBAAoB,UAAU,kBAAkB;AACvD,UAAO,oBAAoB,oBAAoB,kBAAkB;AAGjE,qBAAkB,SAAS,aAAa;AACtC,aAAS,YAAY;KACrB;AAGF,mBAAgB,SAAS,aAAa;AACpC,aAAS,YAAY;KACrB;AAGF,eAAY,QAAQ,SAAS,WAAW;AACtC,YAAQ,oBAAoB,cAAc,iBAAiB;AAC3D,YAAQ,oBAAoB,cAAc,iBAAiB;KAC3D;;IAEH;EAAC;EAAa;EAAU;EAAa;EAAa;EAAY,CAAC;AAElE,QAAO;EAAE;EAAyB;EAAmB;EAAa"}
1	+ {"version":3,"file":"useItemSelector.mjs","names":[],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' \| 'vertical';\n\ntype HorizontalStyleState = {\n left: number;\n width: number;\n opacity: number;\n};\n\ntype VerticalStyleState = {\n top: number;\n height: number;\n opacity: number;\n};\n\ntype StyleState = HorizontalStyleState \| VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n selector?: (option: HTMLElement, index: number) => boolean;\n isHoverable?: boolean;\n orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n optionsRefs: RefObject<HTMLElement[]>,\n {\n selector = selectorDefault,\n isHoverable = false,\n orientation = 'horizontal',\n }: Options = {\n selector: selectorDefault,\n isHoverable: false,\n orientation: 'horizontal',\n }\n) => {\n const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n useState<StyleState \| null>(null);\n\n const [hoveredItem, setHoveredItem] = useState<HTMLElement \| null>(null);\n const hideTimeoutRef = useRef<NodeJS.Timeout \| null>(null);\n const lastPositionRef = useRef<StyleState \| null>(null);\n\n const itemsLength = optionsRefs.current.length;\n\n const calculatePosition = () => {\n let targetElement: HTMLElement \| null = null;\n\n if (hoveredItem) {\n targetElement = hoveredItem;\n // Clear any pending hide timeout when hovering over an item\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n } else {\n targetElement = optionsRefs.current.find(selector) ?? null;\n }\n\n if (!targetElement) {\n // Keep previous position but set opacity to 0\n if (orientation === 'vertical') {\n setChoiceIndicatorPosition((prev) => {\n const verticalPrev = prev as VerticalStyleState \| null;\n const newPosition: VerticalStyleState = {\n top: verticalPrev?.top ?? 0,\n height: verticalPrev?.height ?? 0,\n opacity: 0,\n };\n lastPositionRef.current = newPosition;\n return newPosition;\n });\n } else {\n setChoiceIndicatorPosition((prev) => {\n const horizontalPrev = prev as HorizontalStyleState \| null;\n const newPosition: HorizontalStyleState = {\n left: horizontalPrev?.left ?? 0,\n width: horizontalPrev?.width ?? 0,\n opacity: 0,\n };\n lastPositionRef.current = newPosition;\n return newPosition;\n });\n }\n return;\n }\n\n if (orientation === 'vertical') {\n const top = targetElement.offsetTop;\n const height = targetElement.offsetHeight;\n\n const newPosition = {\n top,\n height,\n opacity: 1,\n };\n setChoiceIndicatorPosition(newPosition);\n lastPositionRef.current = newPosition;\n } else {\n const left = targetElement.offsetLeft;\n const width = targetElement.offsetWidth;\n\n const newPosition = {\n left,\n width,\n opacity: 1,\n };\n setChoiceIndicatorPosition(newPosition);\n lastPositionRef.current = newPosition;\n }\n };\n\n useEffect(() => {\n calculatePosition();\n\n // Event listeners for window events\n window.addEventListener('resize', calculatePosition);\n window.addEventListener('DOMContentLoaded', calculatePosition);\n\n // MutationObserver to watch for 'aria-selected' changes\n const mutationObservers: MutationObserver[] = [];\n\n optionsRefs.current.forEach((option) => {\n if (option) {\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'aria-selected'\n ) {\n calculatePosition();\n break;\n }\n }\n });\n\n observer.observe(option, {\n attributes: true,\n attributeFilter: ['aria-selected'],\n });\n\n mutationObservers.push(observer);\n }\n });\n\n // ResizeObserver to watch for size changes\n const resizeObservers: ResizeObserver[] = [];\n\n const observeSize = (element: HTMLElement) => {\n if (!element) return;\n const resizeObserver = new ResizeObserver(() => {\n calculatePosition();\n });\n resizeObserver.observe(element);\n resizeObservers.push(resizeObserver);\n };\n\n // Observe the selected item\n const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n if (selectedItem) {\n observeSize(selectedItem);\n }\n\n // Observe the hovered item\n if (hoveredItem) {\n observeSize(hoveredItem);\n }\n\n // Add hover event listeners\n const handleMouseEnter = (event: Event) => {\n // Clear any pending hide timeout\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n setHoveredItem(event.currentTarget as HTMLElement);\n };\n\n const handleMouseLeave = () => {\n // Clear any existing timeout\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n }\n\n // Keep the indicator at its current position for 150ms\n // before removing the hovered item\n hideTimeoutRef.current = setTimeout(() => {\n setHoveredItem(null);\n }, 150); // 150ms delay before hiding\n };\n\n if (isHoverable) {\n optionsRefs.current.forEach((option) => {\n option?.addEventListener('mouseenter', handleMouseEnter, {\n passive: true,\n });\n option?.addEventListener('mouseleave', handleMouseLeave, {\n passive: true,\n });\n });\n }\n\n return () => {\n // Clear any pending hide timeout\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n }\n\n // Cleanup window event listeners\n window.removeEventListener('resize', calculatePosition);\n window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n // Disconnect MutationObservers\n mutationObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Disconnect ResizeObservers\n resizeObservers.forEach((observer) => {\n observer.disconnect();\n });\n\n // Remove hover event listeners\n optionsRefs.current.forEach((option) => {\n option?.removeEventListener('mouseenter', handleMouseEnter);\n option?.removeEventListener('mouseleave', handleMouseLeave);\n });\n };\n }, [optionsRefs, selector, hoveredItem, itemsLength, orientation]);\n\n return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":"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"}

package/dist/esm/hooks/usePersistedStore.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePersistedStore.mjs","names":[~~"result: S","setStateWrapper: typeof setState","newValue: S"~~],"sources":["../../../src/hooks/usePersistedStore.ts"],"sourcesContent":["'use client';\n\nimport {\n type Dispatch,\n type SetStateAction,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nexport const usePersistedStore = <S>(\n key: string,\n initialState?: S \| (() => S)\n): [S, Dispatch<SetStateAction<S>>, () => void, () => void] => {\n const [state, setState] = useState<S>(() => {\n // If you have an initial value on the client, send a message out immediately\n if (initialState !== undefined) {\n const result: S =\n typeof initialState === 'function'\n ? (initialState as () => S)()\n : initialState;\n\n if (typeof window === 'undefined') return result;\n\n const persistedState = localStorage?.getItem(key);\n\n if (persistedState) {\n try {\n return JSON.parse(persistedState);\n } catch (e) {\n console.error(e);\n }\n }\n\n return result;\n }\n\n return undefined as S;\n });\n\n useEffect(() => {\n const persistedState = localStorage?.getItem(key);\n\n if (\n persistedState &&\n persistedState !== 'undefined' &&\n state === undefined\n ) {\n try {\n setState(JSON.parse(persistedState));\n } catch (e) {\n console.error(e);\n }\n } else if (initialState !== undefined && state === undefined) {\n setState(initialState);\n }\n }, [key, state]);\n\n /*\n Allows setting state either directly or via a functional update.\n * If passed a function, we merge/update based on the previous state.\n */\n const setStateWrapper: typeof setState = useCallback(\n (valueOrUpdater: SetStateAction<S>) => {\n setState((prev) => {\n const newValue: S =\n typeof valueOrUpdater === 'function'\n ? (valueOrUpdater as (prevVal: S) => S)(prev)\n : valueOrUpdater;\n\n if (newValue !== 'undefined') {\n localStorage?.setItem(key, JSON.stringify(newValue));\n return newValue;\n }\n\n return prev;\n });\n },\n [key, setState]\n );\n\n const loadState = useCallback(() => {\n const savedState = localStorage?.getItem(key);\n if (savedState) {\n setState(JSON.parse(savedState));\n }\n }, [key, setState]);\n\n const clearState = useCallback(() => {\n localStorage?.removeItem(key);\n setState(undefined as S);\n }, [key]);\n\n return useMemo(\n () => [state, setStateWrapper, loadState, clearState],\n [state, setStateWrapper, loadState, clearState]\n );\n};\n"],"mappings":";;;;;AAWA,MAAa,qBACX,KACA,iBAC6D;CAC7D,MAAM,CAAC,OAAO,YAAY,eAAkB;AAE1C,MAAI,iBAAiB,QAAW;GAC9B,~~MAAMA~~,SACJ,OAAO,iBAAiB,aACnB,cAA0B,GAC3B;AAEN,OAAI,OAAO,WAAW,YAAa,QAAO;GAE1C,MAAM,iBAAiB,cAAc,QAAQ,IAAI;AAEjD,OAAI,eACF,KAAI;AACF,WAAO,KAAK,MAAM,eAAe;YAC1B,GAAG;AACV,YAAQ,MAAM,EAAE;;AAIpB,UAAO;;GAIT;AAEF,iBAAgB;EACd,MAAM,iBAAiB,cAAc,QAAQ,IAAI;AAEjD,MACE,kBACA,mBAAmB,eACnB,UAAU,OAEV,KAAI;AACF,YAAS,KAAK,MAAM,eAAe,CAAC;WAC7B,GAAG;AACV,WAAQ,MAAM,EAAE;;WAET,iBAAiB,UAAa,UAAU,OACjD,UAAS,aAAa;IAEvB,CAAC,KAAK,MAAM,CAAC;;;;;CAMhB,~~MAAMC~~,kBAAmC,aACtC,mBAAsC;AACrC,YAAU,SAAS;GACjB,~~MAAMC~~,WACJ,OAAO,mBAAmB,aACrB,eAAqC,KAAK,GAC3C;AAEN,OAAI,aAAa,aAAa;AAC5B,kBAAc,QAAQ,KAAK,KAAK,UAAU,SAAS,CAAC;AACpD,WAAO;;AAGT,UAAO;IACP;IAEJ,CAAC,KAAK,SAAS,CAChB;CAED,MAAM,YAAY,kBAAkB;EAClC,MAAM,aAAa,cAAc,QAAQ,IAAI;AAC7C,MAAI,WACF,UAAS,KAAK,MAAM,WAAW,CAAC;IAEjC,CAAC,KAAK,SAAS,CAAC;CAEnB,MAAM,aAAa,kBAAkB;AACnC,gBAAc,WAAW,IAAI;AAC7B,WAAS,OAAe;IACvB,CAAC,IAAI,CAAC;AAET,QAAO,cACC;EAAC;EAAO;EAAiB;EAAW;EAAW,EACrD;EAAC;EAAO;EAAiB;EAAW;EAAW,CAChD"}
1	+ {"version":3,"file":"usePersistedStore.mjs","names":[],"sources":["../../../src/hooks/usePersistedStore.ts"],"sourcesContent":["'use client';\n\nimport {\n type Dispatch,\n type SetStateAction,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nexport const usePersistedStore = <S>(\n key: string,\n initialState?: S \| (() => S)\n): [S, Dispatch<SetStateAction<S>>, () => void, () => void] => {\n const [state, setState] = useState<S>(() => {\n // If you have an initial value on the client, send a message out immediately\n if (initialState !== undefined) {\n const result: S =\n typeof initialState === 'function'\n ? (initialState as () => S)()\n : initialState;\n\n if (typeof window === 'undefined') return result;\n\n const persistedState = localStorage?.getItem(key);\n\n if (persistedState) {\n try {\n return JSON.parse(persistedState);\n } catch (e) {\n console.error(e);\n }\n }\n\n return result;\n }\n\n return undefined as S;\n });\n\n useEffect(() => {\n const persistedState = localStorage?.getItem(key);\n\n if (\n persistedState &&\n persistedState !== 'undefined' &&\n state === undefined\n ) {\n try {\n setState(JSON.parse(persistedState));\n } catch (e) {\n console.error(e);\n }\n } else if (initialState !== undefined && state === undefined) {\n setState(initialState);\n }\n }, [key, state]);\n\n /*\n Allows setting state either directly or via a functional update.\n * If passed a function, we merge/update based on the previous state.\n */\n const setStateWrapper: typeof setState = useCallback(\n (valueOrUpdater: SetStateAction<S>) => {\n setState((prev) => {\n const newValue: S =\n typeof valueOrUpdater === 'function'\n ? (valueOrUpdater as (prevVal: S) => S)(prev)\n : valueOrUpdater;\n\n if (newValue !== 'undefined') {\n localStorage?.setItem(key, JSON.stringify(newValue));\n return newValue;\n }\n\n return prev;\n });\n },\n [key, setState]\n );\n\n const loadState = useCallback(() => {\n const savedState = localStorage?.getItem(key);\n if (savedState) {\n setState(JSON.parse(savedState));\n }\n }, [key, setState]);\n\n const clearState = useCallback(() => {\n localStorage?.removeItem(key);\n setState(undefined as S);\n }, [key]);\n\n return useMemo(\n () => [state, setStateWrapper, loadState, clearState],\n [state, setStateWrapper, loadState, clearState]\n );\n};\n"],"mappings":";;;;;AAWA,MAAa,qBACX,KACA,iBAC6D;CAC7D,MAAM,CAAC,OAAO,YAAY,eAAkB;AAE1C,MAAI,iBAAiB,QAAW;GAC9B,MAAM,SACJ,OAAO,iBAAiB,aACnB,cAA0B,GAC3B;AAEN,OAAI,OAAO,WAAW,YAAa,QAAO;GAE1C,MAAM,iBAAiB,cAAc,QAAQ,IAAI;AAEjD,OAAI,eACF,KAAI;AACF,WAAO,KAAK,MAAM,eAAe;YAC1B,GAAG;AACV,YAAQ,MAAM,EAAE;;AAIpB,UAAO;;GAIT;AAEF,iBAAgB;EACd,MAAM,iBAAiB,cAAc,QAAQ,IAAI;AAEjD,MACE,kBACA,mBAAmB,eACnB,UAAU,OAEV,KAAI;AACF,YAAS,KAAK,MAAM,eAAe,CAAC;WAC7B,GAAG;AACV,WAAQ,MAAM,EAAE;;WAET,iBAAiB,UAAa,UAAU,OACjD,UAAS,aAAa;IAEvB,CAAC,KAAK,MAAM,CAAC;;;;;CAMhB,MAAM,kBAAmC,aACtC,mBAAsC;AACrC,YAAU,SAAS;GACjB,MAAM,WACJ,OAAO,mBAAmB,aACrB,eAAqC,KAAK,GAC3C;AAEN,OAAI,aAAa,aAAa;AAC5B,kBAAc,QAAQ,KAAK,KAAK,UAAU,SAAS,CAAC;AACpD,WAAO;;AAGT,UAAO;IACP;IAEJ,CAAC,KAAK,SAAS,CAChB;CAED,MAAM,YAAY,kBAAkB;EAClC,MAAM,aAAa,cAAc,QAAQ,IAAI;AAC7C,MAAI,WACF,UAAS,KAAK,MAAM,WAAW,CAAC;IAEjC,CAAC,KAAK,SAAS,CAAC;CAEnB,MAAM,aAAa,kBAAkB;AACnC,gBAAc,WAAW,IAAI;AAC7B,WAAS,OAAe;IACvB,CAAC,IAAI,CAAC;AAET,QAAO,cACC;EAAC;EAAO;EAAiB;EAAW;EAAW,EACrD;EAAC;EAAO;EAAiB;EAAW;EAAW,CAChD"}

package/dist/esm/hooks/useScrollY.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollY.mjs","names":["~~INITIAL_SCROLL_STATE: UseScrollYResult","lastSnapshot: UseScrollYResult","~~scrollY","scrollHeight","clientHeight","scrollYMax","scrollPercentage"],"sources":["../../../src/hooks/useScrollY.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { useGetElementOrWindow } from './useGetElementOrWindow';\n\ntype UseScrollYProps = {\n element?: HTMLElement;\n};\n\ntype UseScrollYResult = {\n scrollY: number;\n scrollPercentage: number;\n scrollYMax: number;\n};\n\nconst INITIAL_SCROLL_STATE: UseScrollYResult = {\n scrollY: 0,\n scrollPercentage: 0,\n scrollYMax: 0,\n};\n\nlet lastSnapshot: UseScrollYResult = INITIAL_SCROLL_STATE;\n\nexport const useScrollY = (props?: UseScrollYProps): UseScrollYResult => {\n const { element } = props ?? {};\n\n const containerElement = useGetElementOrWindow(element);\n\n const subscribe = useCallback(\n (onChange: () => void) => {\n if (typeof window === 'undefined' \|\| !containerElement) return () => {};\n let raf = 0;\n\n const handler = () => {\n if (raf) return;\n raf = window.requestAnimationFrame(() => {\n raf = 0;\n onChange();\n });\n };\n\n containerElement.addEventListener('scroll', handler, { passive: true });\n\n return () => {\n containerElement.removeEventListener('scroll', handler);\n if (raf) window.cancelAnimationFrame(raf);\n };\n },\n [containerElement]\n );\n\n const getSnapshot = (): UseScrollYResult => {\n if (typeof window === 'undefined' \|\| !containerElement) {\n return INITIAL_SCROLL_STATE; // SSR/hydration-safe\n }\n\n // Handle custom element\n if (containerElement instanceof HTMLElement) {\n const scrollY = containerElement.scrollTop;\n const scrollHeight = containerElement.scrollHeight;\n const clientHeight = containerElement.clientHeight;\n const scrollYMax = Math.max(0, scrollHeight - clientHeight);\n const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;\n\n if (\n lastSnapshot.scrollY === scrollY &&\n lastSnapshot.scrollPercentage === scrollPercentage &&\n lastSnapshot.scrollYMax === scrollYMax\n ) {\n return lastSnapshot;\n }\n\n lastSnapshot = { scrollY, scrollPercentage, scrollYMax };\n return lastSnapshot;\n }\n\n // Handle window\n const doc = document.documentElement;\n const body = document.body;\n\n const scrollY =\n window.scrollY ??\n window.pageYOffset ??\n doc?.scrollTop ??\n body?.scrollTop ??\n 0;\n\n const scrollHeight = doc?.scrollHeight ?? body?.scrollHeight ?? 0;\n const clientHeight = doc?.clientHeight ?? window.innerHeight ?? 0;\n const scrollYMax = Math.max(0, scrollHeight - clientHeight);\n const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;\n\n if (\n lastSnapshot.scrollY === scrollY &&\n lastSnapshot.scrollPercentage === scrollPercentage &&\n lastSnapshot.scrollYMax === scrollYMax\n ) {\n return lastSnapshot;\n }\n\n lastSnapshot = { scrollY, scrollPercentage, scrollYMax };\n return lastSnapshot;\n };\n\n const getServerSnapshot = (): UseScrollYResult => INITIAL_SCROLL_STATE;\n\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n};\n"],"mappings":";;;;;;AAeA,~~MAAMA~~,uBAAyC;CAC7C,SAAS;CACT,kBAAkB;CAClB,YAAY;CACb;AAED,~~IAAIC~~,eAAiC;AAErC,MAAa,cAAc,UAA8C;CACvE,MAAM,EAAE,YAAY,SAAS,EAAE;CAE/B,MAAM,mBAAmB,sBAAsB,QAAQ;CAEvD,MAAM,YAAY,aACf,aAAyB;AACxB,MAAI,OAAO,WAAW,eAAe,CAAC,iBAAkB,cAAa;EACrE,IAAI,MAAM;EAEV,MAAM,gBAAgB;AACpB,OAAI,IAAK;AACT,SAAM,OAAO,4BAA4B;AACvC,UAAM;AACN,cAAU;KACV;;AAGJ,mBAAiB,iBAAiB,UAAU,SAAS,EAAE,SAAS,MAAM,CAAC;AAEvE,eAAa;AACX,oBAAiB,oBAAoB,UAAU,QAAQ;AACvD,OAAI,IAAK,QAAO,qBAAqB,IAAI;;IAG7C,CAAC,iBAAiB,CACnB;CAED,MAAM,oBAAsC;AAC1C,MAAI,OAAO,WAAW,eAAe,CAAC,iBACpC,QAAO;AAIT,MAAI,4BAA4B,aAAa;GAC3C,~~MAAMC~~,YAAU,iBAAiB;GACjC,MAAMC,iBAAe,iBAAiB;GACtC,MAAMC,iBAAe,iBAAiB;GACtC,MAAMC,eAAa,KAAK,IAAI,GAAGF,iBAAeC,eAAa;GAC3D,MAAME,qBAAmBD,eAAa,IAAIH,YAAUG,eAAa;AAEjE,OACE,aAAa,YAAYH,aACzB,aAAa,qBAAqBI,sBAClC,aAAa,eAAeD,aAE5B,QAAO;AAGT,kBAAe;IAAE;IAAS;IAAkB;IAAY;AACxD,UAAO;;EAIT,MAAM,MAAM,SAAS;EACrB,MAAM,OAAO,SAAS;EAEtB,MAAM,UACJ,OAAO,WACP,OAAO,eACP,KAAK,aACL,MAAM,aACN;EAEF,MAAM,eAAe,KAAK,gBAAgB,MAAM,gBAAgB;EAChE,MAAM,eAAe,KAAK,gBAAgB,OAAO,eAAe;EAChE,MAAM,aAAa,KAAK,IAAI,GAAG,eAAe,aAAa;EAC3D,MAAM,mBAAmB,aAAa,IAAI,UAAU,aAAa;AAEjE,MACE,aAAa,YAAY,WACzB,aAAa,qBAAqB,oBAClC,aAAa,eAAe,WAE5B,QAAO;AAGT,iBAAe;GAAE;GAAS;GAAkB;GAAY;AACxD,SAAO;;CAGT,MAAM,0BAA4C;AAElD,QAAO,qBAAqB,WAAW,aAAa,kBAAkB"}
1	+ {"version":3,"file":"useScrollY.mjs","names":["scrollY","scrollHeight","clientHeight","scrollYMax","scrollPercentage"],"sources":["../../../src/hooks/useScrollY.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { useGetElementOrWindow } from './useGetElementOrWindow';\n\ntype UseScrollYProps = {\n element?: HTMLElement;\n};\n\ntype UseScrollYResult = {\n scrollY: number;\n scrollPercentage: number;\n scrollYMax: number;\n};\n\nconst INITIAL_SCROLL_STATE: UseScrollYResult = {\n scrollY: 0,\n scrollPercentage: 0,\n scrollYMax: 0,\n};\n\nlet lastSnapshot: UseScrollYResult = INITIAL_SCROLL_STATE;\n\nexport const useScrollY = (props?: UseScrollYProps): UseScrollYResult => {\n const { element } = props ?? {};\n\n const containerElement = useGetElementOrWindow(element);\n\n const subscribe = useCallback(\n (onChange: () => void) => {\n if (typeof window === 'undefined' \|\| !containerElement) return () => {};\n let raf = 0;\n\n const handler = () => {\n if (raf) return;\n raf = window.requestAnimationFrame(() => {\n raf = 0;\n onChange();\n });\n };\n\n containerElement.addEventListener('scroll', handler, { passive: true });\n\n return () => {\n containerElement.removeEventListener('scroll', handler);\n if (raf) window.cancelAnimationFrame(raf);\n };\n },\n [containerElement]\n );\n\n const getSnapshot = (): UseScrollYResult => {\n if (typeof window === 'undefined' \|\| !containerElement) {\n return INITIAL_SCROLL_STATE; // SSR/hydration-safe\n }\n\n // Handle custom element\n if (containerElement instanceof HTMLElement) {\n const scrollY = containerElement.scrollTop;\n const scrollHeight = containerElement.scrollHeight;\n const clientHeight = containerElement.clientHeight;\n const scrollYMax = Math.max(0, scrollHeight - clientHeight);\n const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;\n\n if (\n lastSnapshot.scrollY === scrollY &&\n lastSnapshot.scrollPercentage === scrollPercentage &&\n lastSnapshot.scrollYMax === scrollYMax\n ) {\n return lastSnapshot;\n }\n\n lastSnapshot = { scrollY, scrollPercentage, scrollYMax };\n return lastSnapshot;\n }\n\n // Handle window\n const doc = document.documentElement;\n const body = document.body;\n\n const scrollY =\n window.scrollY ??\n window.pageYOffset ??\n doc?.scrollTop ??\n body?.scrollTop ??\n 0;\n\n const scrollHeight = doc?.scrollHeight ?? body?.scrollHeight ?? 0;\n const clientHeight = doc?.clientHeight ?? window.innerHeight ?? 0;\n const scrollYMax = Math.max(0, scrollHeight - clientHeight);\n const scrollPercentage = scrollYMax > 0 ? scrollY / scrollYMax : 0;\n\n if (\n lastSnapshot.scrollY === scrollY &&\n lastSnapshot.scrollPercentage === scrollPercentage &&\n lastSnapshot.scrollYMax === scrollYMax\n ) {\n return lastSnapshot;\n }\n\n lastSnapshot = { scrollY, scrollPercentage, scrollYMax };\n return lastSnapshot;\n };\n\n const getServerSnapshot = (): UseScrollYResult => INITIAL_SCROLL_STATE;\n\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n};\n"],"mappings":";;;;;;AAeA,MAAM,uBAAyC;CAC7C,SAAS;CACT,kBAAkB;CAClB,YAAY;CACb;AAED,IAAI,eAAiC;AAErC,MAAa,cAAc,UAA8C;CACvE,MAAM,EAAE,YAAY,SAAS,EAAE;CAE/B,MAAM,mBAAmB,sBAAsB,QAAQ;CAEvD,MAAM,YAAY,aACf,aAAyB;AACxB,MAAI,OAAO,WAAW,eAAe,CAAC,iBAAkB,cAAa;EACrE,IAAI,MAAM;EAEV,MAAM,gBAAgB;AACpB,OAAI,IAAK;AACT,SAAM,OAAO,4BAA4B;AACvC,UAAM;AACN,cAAU;KACV;;AAGJ,mBAAiB,iBAAiB,UAAU,SAAS,EAAE,SAAS,MAAM,CAAC;AAEvE,eAAa;AACX,oBAAiB,oBAAoB,UAAU,QAAQ;AACvD,OAAI,IAAK,QAAO,qBAAqB,IAAI;;IAG7C,CAAC,iBAAiB,CACnB;CAED,MAAM,oBAAsC;AAC1C,MAAI,OAAO,WAAW,eAAe,CAAC,iBACpC,QAAO;AAIT,MAAI,4BAA4B,aAAa;GAC3C,MAAMA,YAAU,iBAAiB;GACjC,MAAMC,iBAAe,iBAAiB;GACtC,MAAMC,iBAAe,iBAAiB;GACtC,MAAMC,eAAa,KAAK,IAAI,GAAGF,iBAAeC,eAAa;GAC3D,MAAME,qBAAmBD,eAAa,IAAIH,YAAUG,eAAa;AAEjE,OACE,aAAa,YAAYH,aACzB,aAAa,qBAAqBI,sBAClC,aAAa,eAAeD,aAE5B,QAAO;AAGT,kBAAe;IAAE;IAAS;IAAkB;IAAY;AACxD,UAAO;;EAIT,MAAM,MAAM,SAAS;EACrB,MAAM,OAAO,SAAS;EAEtB,MAAM,UACJ,OAAO,WACP,OAAO,eACP,KAAK,aACL,MAAM,aACN;EAEF,MAAM,eAAe,KAAK,gBAAgB,MAAM,gBAAgB;EAChE,MAAM,eAAe,KAAK,gBAAgB,OAAO,eAAe;EAChE,MAAM,aAAa,KAAK,IAAI,GAAG,eAAe,aAAa;EAC3D,MAAM,mBAAmB,aAAa,IAAI,UAAU,aAAa;AAEjE,MACE,aAAa,YAAY,WACzB,aAAa,qBAAqB,oBAClC,aAAa,eAAe,WAE5B,QAAO;AAGT,iBAAe;GAAE;GAAS;GAAkB;GAAY;AACxD,SAAO;;CAGT,MAAM,0BAA4C;AAElD,QAAO,qBAAqB,WAAW,aAAa,kBAAkB"}

package/dist/esm/libs/auth.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"auth.mjs","names":["signInEmail: AuthClient['signIn']['email']","signInSocial: AuthClient['signIn']['social']","signUpEmail: AuthClient['signUp']['email']","signOut: AuthClient['signOut']","changePasswordSession: AuthClient['changePassword']","requestPasswordResetSession: AuthClient['requestPasswordReset']","resetPassword: AuthClient['resetPassword']","verifyEmailSession: AuthClient['verifyEmail']","getSession: AuthClient['getSession']","forgetPassword: AuthClient['requestPasswordReset']","sendVerificationEmail: AuthClient['sendVerificationEmail']","changeEmail: AuthClient['changeEmail']","deleteUser: AuthClient['deleteUser']","revokeSession: AuthClient['revokeSession']","revokeSessions: AuthClient['revokeSessions']","revokeOtherSessions: AuthClient['revokeOtherSessions']","linkSocial: AuthClient['linkSocial']","listAccounts: AuthClient['listAccounts']","unlinkAccount: AuthClient['unlinkAccount']","refreshToken: AuthClient['refreshToken']","getAccessToken: AuthClient['getAccessToken']","accountInfo: AuthClient['accountInfo']","updateUser: AuthClient['updateUser']","listSessions: AuthClient['listSessions']","enableTwoFactor: AuthClient['twoFactor']['enable']","disableTwoFactor: AuthClient['twoFactor']['disable']","verifyTotp: AuthClient['twoFactor']['verifyTotp']","verifyBackupCode: AuthClient['twoFactor']['verifyBackupCode']","addPasskey: AuthClient['passkey']['addPasskey']","signInPasskey: AuthClient['signIn']['passkey']","deletePasskey: AuthClient['passkey']['deletePasskey']","signInMagicLink: any","signInSSO: AuthClient['signIn']['sso']","registerSSO: AuthClient['sso']['register']"],"sources":["../../../src/libs/auth.ts"],"sourcesContent":["import { passkeyClient } from '@better-auth/passkey/client';\nimport { ssoClient } from '@better-auth/sso/client';\nimport configuration from '@intlayer/config/built';\nimport type { IntlayerConfig } from '@intlayer/types';\nimport { createAuthClient } from 'better-auth/client';\nimport { magicLinkClient, twoFactorClient } from 'better-auth/client/plugins';\n\nconst getAuthClient = (backendURL: string) =>\n createAuthClient({\n baseURL: backendURL,\n withCredentials: true, // makes fetch forward cookies\n plugins: [\n twoFactorClient({\n onTwoFactorRedirect: () => {\n // Preserve redirect_url when redirecting to 2FA\n const searchParams = new URLSearchParams(window.location.search);\n const redirectUrl = searchParams.get('redirect_url');\n const twoFaUrl = redirectUrl\n ? `/auth/2fa?redirect_url=${encodeURIComponent(redirectUrl)}`\n : '/auth/2fa';\n window.location.href = twoFaUrl;\n },\n }),\n passkeyClient(),\n magicLinkClient() as never,\n ssoClient(),\n ],\n });\n\ntype AuthClient = ReturnType<typeof getAuthClient>;\n\nexport interface AuthAPI {\n getAuthClient: () => AuthClient;\n signInEmail: AuthClient['signIn']['email'];\n signUpEmail: AuthClient['signUp']['email'];\n signOut: AuthClient['signOut'];\n signInSocial: AuthClient['signIn']['social'];\n linkSocial: AuthClient['linkSocial'];\n changePasswordSession: AuthClient['changePassword'];\n requestPasswordResetSession: AuthClient['requestPasswordReset'];\n resetPassword: AuthClient['resetPassword'];\n verifyEmailSession: AuthClient['verifyEmail'];\n getSession: AuthClient['getSession'];\n forgetPassword: AuthClient['requestPasswordReset'];\n sendVerificationEmail: AuthClient['sendVerificationEmail'];\n changeEmail: AuthClient['changeEmail'];\n deleteUser: AuthClient['deleteUser'];\n revokeSession: AuthClient['revokeSession'];\n revokeSessions: AuthClient['revokeSessions'];\n revokeOtherSessions: AuthClient['revokeOtherSessions'];\n listAccounts: AuthClient['listAccounts'];\n unlinkAccount: AuthClient['unlinkAccount'];\n refreshToken: AuthClient['refreshToken'];\n getAccessToken: AuthClient['getAccessToken'];\n accountInfo: AuthClient['accountInfo'];\n updateUser: AuthClient['updateUser'];\n listSessions: AuthClient['listSessions'];\n enableTwoFactor: AuthClient['twoFactor']['enable'];\n disableTwoFactor: AuthClient['twoFactor']['disable'];\n verifyTotp: AuthClient['twoFactor']['verifyTotp'];\n verifyBackupCode: AuthClient['twoFactor']['verifyBackupCode'];\n addPasskey: AuthClient['passkey']['addPasskey'];\n signInPasskey: AuthClient['signIn']['passkey'];\n deletePasskey: AuthClient['passkey']['deletePasskey'];\n listPasskeys: () => Promise<any>;\n signInMagicLink: (\n // Redeclare it because of type inference issues\n input: { email: string; callbackURL: string }\n ) => any;\n registerSSO: AuthClient['sso']['register'];\n listSSOProviders: () => Promise<any>;\n deleteSSOProvider: (args: { providerId: string }) => Promise<any>;\n signInSSO: AuthClient['signIn']['sso'];\n}\n\nexport const getAuthAPI = (intlayerConfig?: IntlayerConfig): AuthAPI => {\n const backendURL =\n intlayerConfig?.editor?.backendURL ?? configuration?.editor?.backendURL;\n\n if (!backendURL) {\n throw new Error(\n 'Backend URL is not defined in the Intlayer configuration.'\n );\n }\n\n const client = getAuthClient(backendURL);\n\n const signInEmail: AuthClient['signIn']['email'] = async (...args) => {\n return client.signIn.email(...args);\n };\n\n const signInSocial: AuthClient['signIn']['social'] = async (...args) => {\n return client.signIn.social(...args);\n };\n\n const signUpEmail: AuthClient['signUp']['email'] = async (...args) => {\n return client.signUp.email(...args);\n };\n\n const signOut: AuthClient['signOut'] = async (...args) => {\n return client.signOut(...args);\n };\n\n const changePasswordSession: AuthClient['changePassword'] = async (\n ...args\n ) => {\n return client.changePassword(...args);\n };\n\n const requestPasswordResetSession: AuthClient['requestPasswordReset'] =\n async (...args) => {\n return client.requestPasswordReset(...args);\n };\n\n // @ts-ignore - resetPassword is not typed\n const resetPassword: AuthClient['resetPassword'] = async (...args) => {\n return client.resetPassword(...args);\n };\n\n const verifyEmailSession: AuthClient['verifyEmail'] = async (...args) => {\n return client.verifyEmail(...args);\n };\n\n const getSession: AuthClient['getSession'] = async (...args) => {\n return client.getSession(...args);\n };\n\n const forgetPassword: AuthClient['requestPasswordReset'] = async (\n ...args\n ) => {\n return client.requestPasswordReset(...args);\n };\n\n const sendVerificationEmail: AuthClient['sendVerificationEmail'] = async (\n ...args\n ) => {\n return client.sendVerificationEmail(...args);\n };\n\n const changeEmail: AuthClient['changeEmail'] = async (...args) => {\n return client.changeEmail(...args);\n };\n\n // @ts-ignore - deleteUser is not typed\n const deleteUser: AuthClient['deleteUser'] = async (...args) => {\n return client.deleteUser(...args);\n };\n\n const revokeSession: AuthClient['revokeSession'] = async (...args) => {\n return client.revokeSession(...args);\n };\n\n const revokeSessions: AuthClient['revokeSessions'] = async (...args) => {\n return client.revokeSessions(...args);\n };\n\n const revokeOtherSessions: AuthClient['revokeOtherSessions'] = async (\n ...args\n ) => {\n return client.revokeOtherSessions(...args);\n };\n\n const linkSocial: AuthClient['linkSocial'] = async (...args) => {\n return client.linkSocial(...args);\n };\n\n const listAccounts: AuthClient['listAccounts'] = async (...args) => {\n return client.listAccounts(...args);\n };\n\n const unlinkAccount: AuthClient['unlinkAccount'] = async (...args) => {\n return client.unlinkAccount(...args);\n };\n\n const refreshToken: AuthClient['refreshToken'] = async (...args) => {\n return client.refreshToken(...args);\n };\n\n const getAccessToken: AuthClient['getAccessToken'] = async (...args) => {\n return client.getAccessToken(...args);\n };\n\n const accountInfo: AuthClient['accountInfo'] = async (...args) => {\n return client.accountInfo(...args);\n };\n\n const updateUser: AuthClient['updateUser'] = async (...args) => {\n return client.updateUser(...args);\n };\n\n const listSessions: AuthClient['listSessions'] = async (...args) => {\n return client.listSessions(...args);\n };\n\n const enableTwoFactor: AuthClient['twoFactor']['enable'] = async (\n ...args\n ) => {\n return client.twoFactor.enable(...args) as ReturnType<\n AuthClient['twoFactor']['enable']\n >;\n };\n\n const disableTwoFactor: AuthClient['twoFactor']['disable'] = async (\n ...args\n ) => {\n return client.twoFactor.disable(...args) as ReturnType<\n AuthClient['twoFactor']['disable']\n >;\n };\n\n const verifyTotp: AuthClient['twoFactor']['verifyTotp'] = async (...args) => {\n return client.twoFactor.verifyTotp(...args) as ReturnType<\n AuthClient['twoFactor']['verifyTotp']\n >;\n };\n\n const verifyBackupCode: AuthClient['twoFactor']['verifyBackupCode'] = async (\n ...args\n ) => {\n return client.twoFactor.verifyBackupCode(...args) as ReturnType<\n AuthClient['twoFactor']['verifyBackupCode']\n >;\n };\n\n const addPasskey: AuthClient['passkey']['addPasskey'] = async (...args) => {\n return client.passkey.addPasskey(...args);\n };\n\n const signInPasskey: AuthClient['signIn']['passkey'] = async (...args) => {\n return client.signIn.passkey(...args);\n };\n\n const deletePasskey: AuthClient['passkey']['deletePasskey'] = async (\n ...args\n ) => {\n return client.passkey.deletePasskey(...args);\n };\n\n const listPasskeys = async () => {\n // @ts-ignore - listPasskeys may not be typed yet\n return client.$fetch('/passkey/list-user-passkeys', {\n method: 'GET',\n });\n };\n\n const signInMagicLink: any = async (...args: any[]) => {\n return (client.signIn as any).magicLink(...args);\n };\n\n const signInSSO: AuthClient['signIn']['sso'] = async (...args) => {\n return client.signIn.sso(...args);\n };\n\n const registerSSO: AuthClient['sso']['register'] = async (...args) => {\n return client.sso.register(...args);\n };\n\n const listSSOProviders = async () => {\n // Not implemented yet\n };\n\n const deleteSSOProvider = async (args: { providerId: string }) => {\n // Not implemented yet\n };\n\n return {\n getAuthClient: () => client,\n signInEmail,\n signUpEmail,\n signOut,\n signInSocial,\n linkSocial,\n changePasswordSession,\n requestPasswordResetSession,\n resetPassword,\n verifyEmailSession,\n getSession,\n forgetPassword,\n sendVerificationEmail,\n changeEmail,\n deleteUser,\n revokeSession,\n revokeSessions,\n revokeOtherSessions,\n listAccounts,\n unlinkAccount,\n refreshToken,\n getAccessToken,\n accountInfo,\n updateUser,\n listSessions,\n enableTwoFactor,\n disableTwoFactor,\n verifyTotp,\n verifyBackupCode,\n addPasskey,\n signInPasskey,\n deletePasskey,\n listPasskeys,\n signInMagicLink,\n signInSSO,\n registerSSO,\n listSSOProviders,\n deleteSSOProvider,\n };\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"auth.mjs","names":[],"sources":["../../../src/libs/auth.ts"],"sourcesContent":["import { passkeyClient } from '@better-auth/passkey/client';\nimport { ssoClient } from '@better-auth/sso/client';\nimport configuration from '@intlayer/config/built';\nimport type { IntlayerConfig } from '@intlayer/types';\nimport { createAuthClient } from 'better-auth/client';\nimport { magicLinkClient, twoFactorClient } from 'better-auth/client/plugins';\n\nconst getAuthClient = (backendURL: string) =>\n createAuthClient({\n baseURL: backendURL,\n withCredentials: true, // makes fetch forward cookies\n plugins: [\n twoFactorClient({\n onTwoFactorRedirect: () => {\n // Preserve redirect_url when redirecting to 2FA\n const searchParams = new URLSearchParams(window.location.search);\n const redirectUrl = searchParams.get('redirect_url');\n const twoFaUrl = redirectUrl\n ? `/auth/2fa?redirect_url=${encodeURIComponent(redirectUrl)}`\n : '/auth/2fa';\n window.location.href = twoFaUrl;\n },\n }),\n passkeyClient(),\n magicLinkClient() as never,\n ssoClient(),\n ],\n });\n\ntype AuthClient = ReturnType<typeof getAuthClient>;\n\nexport interface AuthAPI {\n getAuthClient: () => AuthClient;\n signInEmail: AuthClient['signIn']['email'];\n signUpEmail: AuthClient['signUp']['email'];\n signOut: AuthClient['signOut'];\n signInSocial: AuthClient['signIn']['social'];\n linkSocial: AuthClient['linkSocial'];\n changePasswordSession: AuthClient['changePassword'];\n requestPasswordResetSession: AuthClient['requestPasswordReset'];\n resetPassword: AuthClient['resetPassword'];\n verifyEmailSession: AuthClient['verifyEmail'];\n getSession: AuthClient['getSession'];\n forgetPassword: AuthClient['requestPasswordReset'];\n sendVerificationEmail: AuthClient['sendVerificationEmail'];\n changeEmail: AuthClient['changeEmail'];\n deleteUser: AuthClient['deleteUser'];\n revokeSession: AuthClient['revokeSession'];\n revokeSessions: AuthClient['revokeSessions'];\n revokeOtherSessions: AuthClient['revokeOtherSessions'];\n listAccounts: AuthClient['listAccounts'];\n unlinkAccount: AuthClient['unlinkAccount'];\n refreshToken: AuthClient['refreshToken'];\n getAccessToken: AuthClient['getAccessToken'];\n accountInfo: AuthClient['accountInfo'];\n updateUser: AuthClient['updateUser'];\n listSessions: AuthClient['listSessions'];\n enableTwoFactor: AuthClient['twoFactor']['enable'];\n disableTwoFactor: AuthClient['twoFactor']['disable'];\n verifyTotp: AuthClient['twoFactor']['verifyTotp'];\n verifyBackupCode: AuthClient['twoFactor']['verifyBackupCode'];\n addPasskey: AuthClient['passkey']['addPasskey'];\n signInPasskey: AuthClient['signIn']['passkey'];\n deletePasskey: AuthClient['passkey']['deletePasskey'];\n listPasskeys: () => Promise<any>;\n signInMagicLink: (\n // Redeclare it because of type inference issues\n input: { email: string; callbackURL: string }\n ) => any;\n registerSSO: AuthClient['sso']['register'];\n listSSOProviders: () => Promise<any>;\n deleteSSOProvider: (args: { providerId: string }) => Promise<any>;\n signInSSO: AuthClient['signIn']['sso'];\n}\n\nexport const getAuthAPI = (intlayerConfig?: IntlayerConfig): AuthAPI => {\n const backendURL =\n intlayerConfig?.editor?.backendURL ?? configuration?.editor?.backendURL;\n\n if (!backendURL) {\n throw new Error(\n 'Backend URL is not defined in the Intlayer configuration.'\n );\n }\n\n const client = getAuthClient(backendURL);\n\n const signInEmail: AuthClient['signIn']['email'] = async (...args) => {\n return client.signIn.email(...args);\n };\n\n const signInSocial: AuthClient['signIn']['social'] = async (...args) => {\n return client.signIn.social(...args);\n };\n\n const signUpEmail: AuthClient['signUp']['email'] = async (...args) => {\n return client.signUp.email(...args);\n };\n\n const signOut: AuthClient['signOut'] = async (...args) => {\n return client.signOut(...args);\n };\n\n const changePasswordSession: AuthClient['changePassword'] = async (\n ...args\n ) => {\n return client.changePassword(...args);\n };\n\n const requestPasswordResetSession: AuthClient['requestPasswordReset'] =\n async (...args) => {\n return client.requestPasswordReset(...args);\n };\n\n // @ts-ignore - resetPassword is not typed\n const resetPassword: AuthClient['resetPassword'] = async (...args) => {\n return client.resetPassword(...args);\n };\n\n const verifyEmailSession: AuthClient['verifyEmail'] = async (...args) => {\n return client.verifyEmail(...args);\n };\n\n const getSession: AuthClient['getSession'] = async (...args) => {\n return client.getSession(...args);\n };\n\n const forgetPassword: AuthClient['requestPasswordReset'] = async (\n ...args\n ) => {\n return client.requestPasswordReset(...args);\n };\n\n const sendVerificationEmail: AuthClient['sendVerificationEmail'] = async (\n ...args\n ) => {\n return client.sendVerificationEmail(...args);\n };\n\n const changeEmail: AuthClient['changeEmail'] = async (...args) => {\n return client.changeEmail(...args);\n };\n\n // @ts-ignore - deleteUser is not typed\n const deleteUser: AuthClient['deleteUser'] = async (...args) => {\n return client.deleteUser(...args);\n };\n\n const revokeSession: AuthClient['revokeSession'] = async (...args) => {\n return client.revokeSession(...args);\n };\n\n const revokeSessions: AuthClient['revokeSessions'] = async (...args) => {\n return client.revokeSessions(...args);\n };\n\n const revokeOtherSessions: AuthClient['revokeOtherSessions'] = async (\n ...args\n ) => {\n return client.revokeOtherSessions(...args);\n };\n\n const linkSocial: AuthClient['linkSocial'] = async (...args) => {\n return client.linkSocial(...args);\n };\n\n const listAccounts: AuthClient['listAccounts'] = async (...args) => {\n return client.listAccounts(...args);\n };\n\n const unlinkAccount: AuthClient['unlinkAccount'] = async (...args) => {\n return client.unlinkAccount(...args);\n };\n\n const refreshToken: AuthClient['refreshToken'] = async (...args) => {\n return client.refreshToken(...args);\n };\n\n const getAccessToken: AuthClient['getAccessToken'] = async (...args) => {\n return client.getAccessToken(...args);\n };\n\n const accountInfo: AuthClient['accountInfo'] = async (...args) => {\n return client.accountInfo(...args);\n };\n\n const updateUser: AuthClient['updateUser'] = async (...args) => {\n return client.updateUser(...args);\n };\n\n const listSessions: AuthClient['listSessions'] = async (...args) => {\n return client.listSessions(...args);\n };\n\n const enableTwoFactor: AuthClient['twoFactor']['enable'] = async (\n ...args\n ) => {\n return client.twoFactor.enable(...args) as ReturnType<\n AuthClient['twoFactor']['enable']\n >;\n };\n\n const disableTwoFactor: AuthClient['twoFactor']['disable'] = async (\n ...args\n ) => {\n return client.twoFactor.disable(...args) as ReturnType<\n AuthClient['twoFactor']['disable']\n >;\n };\n\n const verifyTotp: AuthClient['twoFactor']['verifyTotp'] = async (...args) => {\n return client.twoFactor.verifyTotp(...args) as ReturnType<\n AuthClient['twoFactor']['verifyTotp']\n >;\n };\n\n const verifyBackupCode: AuthClient['twoFactor']['verifyBackupCode'] = async (\n ...args\n ) => {\n return client.twoFactor.verifyBackupCode(...args) as ReturnType<\n AuthClient['twoFactor']['verifyBackupCode']\n >;\n };\n\n const addPasskey: AuthClient['passkey']['addPasskey'] = async (...args) => {\n return client.passkey.addPasskey(...args);\n };\n\n const signInPasskey: AuthClient['signIn']['passkey'] = async (...args) => {\n return client.signIn.passkey(...args);\n };\n\n const deletePasskey: AuthClient['passkey']['deletePasskey'] = async (\n ...args\n ) => {\n return client.passkey.deletePasskey(...args);\n };\n\n const listPasskeys = async () => {\n // @ts-ignore - listPasskeys may not be typed yet\n return client.$fetch('/passkey/list-user-passkeys', {\n method: 'GET',\n });\n };\n\n const signInMagicLink: any = async (...args: any[]) => {\n return (client.signIn as any).magicLink(...args);\n };\n\n const signInSSO: AuthClient['signIn']['sso'] = async (...args) => {\n return client.signIn.sso(...args);\n };\n\n const registerSSO: AuthClient['sso']['register'] = async (...args) => {\n return client.sso.register(...args);\n };\n\n const listSSOProviders = async () => {\n // Not implemented yet\n };\n\n const deleteSSOProvider = async (args: { providerId: string }) => {\n // Not implemented yet\n };\n\n return {\n getAuthClient: () => client,\n signInEmail,\n signUpEmail,\n signOut,\n signInSocial,\n linkSocial,\n changePasswordSession,\n requestPasswordResetSession,\n resetPassword,\n verifyEmailSession,\n getSession,\n forgetPassword,\n sendVerificationEmail,\n changeEmail,\n deleteUser,\n revokeSession,\n revokeSessions,\n revokeOtherSessions,\n listAccounts,\n unlinkAccount,\n refreshToken,\n getAccessToken,\n accountInfo,\n updateUser,\n listSessions,\n enableTwoFactor,\n disableTwoFactor,\n verifyTotp,\n verifyBackupCode,\n addPasskey,\n signInPasskey,\n deletePasskey,\n listPasskeys,\n signInMagicLink,\n signInSSO,\n registerSSO,\n listSSOProviders,\n deleteSSOProvider,\n };\n};\n"],"mappings":"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"}