npm - @intlayer/design-system - Versions diffs - 8.11.2 → 8.11.3 - Mend

@intlayer/design-system 8.11.2 → 8.11.3

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 (61) hide show

package/dist/esm/components/Modal/Modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/*\n Enumeration of available modal sizes\n /\nexport enum ModalSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n UNSET = 'unset',\n}\n\ntype ModalProps = {\n children: ReactNode;\n isOpen: boolean;\n onClose?: () => void;\n container?: HTMLElement;\n disableScroll?: boolean;\n hasCloseButton?: boolean;\n title?: ReactNode;\n size?: ModalSize \| `${ModalSize}`;\n /\n Defines if the modal content area is scrollable.\n /\n isScrollable?: boolean \| 'x' \| 'y';\n} & Partial<\n Pick<\n ContainerProps,\n \| 'className'\n \| 'transparency'\n \| 'border'\n \| 'background'\n \| 'roundedSize'\n \| 'borderColor'\n \| 'padding'\n \| 'separator'\n \| 'gap'\n >\n>;\n\nconst modalVariants = cva(\n 'flex cursor-default flex-col overflow-hidden shadow-sm',\n {\n variants: {\n size: {\n sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n lg: 'h-auto max-h-[70vh] w-[95vw] max-w-4xl',\n xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n unset: 'h-auto max-h-[95vh] w-[95vw]',\n },\n },\n defaultVariants: {\n size: 'unset',\n },\n }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n none: 'p-0',\n sm: 'px-2 py-4',\n md: 'px-4 py-6',\n lg: 'px-6 py-8',\n xl: 'px-8 py-10',\n '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/\n Modal Component\n \n A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n \n Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n \n @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n * <p>Modal content goes here</p>\n * </Modal>\n * ```\n \n @example\n * With title and close button:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * title=\"Confirm Action\"\n * hasCloseButton\n * size={ModalSize.LG}\n * >\n * <div>\n * <p>Are you sure you want to continue?</p>\n * <Button onClick={onConfirm}>Confirm</Button>\n * </div>\n * </Modal>\n * ```\n \n @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * container={customContainer}\n * background=\"card\"\n * padding=\"lg\"\n * border=\"default\"\n * >\n * Content with custom styling\n * </Modal>\n * ```\n \n Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n \n @param props - Modal component props\n * @returns JSX element rendered via createPortal\n /\nexport const Modal: FC<ModalProps> = ({\n children,\n isOpen,\n container,\n onClose,\n hasCloseButton = false,\n title,\n size = ModalSize.MD,\n className,\n isScrollable = false, // Enable the scroll of the content\n disableScroll = true, // Disable the scroll of the background\n padding = 'none', // Extract padding here\n ...props\n}) => {\n const containerElement = useGetElementOrWindow(container);\n\n useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isOpen && onClose) {\n onClose();\n }\n };\n document.addEventListener('keydown', handleEscape);\n return () => {\n document.removeEventListener('keydown', handleEscape);\n };\n }, [isOpen, onClose]);\n\n if (!containerElement) return <></>;\n\n const hasTitle = Boolean(title);\n\n // Determine the class for the inner content based on the padding prop\n const contentPaddingClass =\n contentPaddingVariants[\n (padding as keyof typeof contentPaddingVariants) \|\| 'none'\n ];\n\n return createPortal(\n <m.div\n className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n animate={isOpen ? 'visible' : 'invisible'}\n variants={{\n visible: {\n opacity: 1,\n visibility: 'visible',\n transition: { duration: 0.1, when: 'beforeChildren' },\n },\n invisible: {\n opacity: 0,\n visibility: 'hidden',\n transition: { duration: 0.1, when: 'afterChildren' },\n },\n }}\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n aria-hidden={!isOpen}\n >\n <MotionModal\n onClick={(e) => e.stopPropagation()}\n initial={{ scale: isOpen ? 0.5 : 1 }}\n animate={{ scale: isOpen ? 1 : 0.5 }}\n transition={{ duration: 0.3 }}\n className={modalVariants({ size, className })}\n role=\"dialog\"\n aria-modal\n roundedSize=\"4xl\"\n // Force the outer container to have no padding so scrollbars hit the edge\n padding=\"none\"\n {...props}\n >\n {/ HEADER SECTION /}\n <div\n className={cn(\n 'relative flex-none px-4 pt-4',\n hasCloseButton && hasTitle\n ? `flex items-start`\n : hasCloseButton\n ? `flex justify-end`\n : hasTitle\n ? `items-center`\n : `hidden`\n )}\n >\n {hasTitle && (\n <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n {title}\n </H3>\n )}\n {hasCloseButton && (\n <Button\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n label=\"Close modal\"\n className=\"ml-auto\"\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n Icon={X}\n size={ButtonSize.ICON_MD}\n />\n )}\n </div>\n\n {/ SCROLLABLE WRAPPER - Full width, no padding /}\n <div\n className={cn(\n 'flex min-h-0 w-full flex-1 flex-col',\n // Scrollbars will now appear at the very edge of this div (the modal edge)\n isScrollable === true && 'overflow-auto',\n isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n !isScrollable && 'overflow-visible'\n )}\n >\n {/ CONTENT PADDING WRAPPER /}\n {/ We apply the padding class here, effectively putting content inside the scroll area */}\n <div\n className={cn(\n 'flex h-full w-full flex-1 flex-col',\n contentPaddingClass\n )}\n >\n {children}\n </div>\n </div>\n </MotionModal>\n </m.div>,\n containerElement\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,YAAL;CACL;CACA;CACA;CACA;CACA;;AACF;AA8BA,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AAGA,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,cAAcA,OAAE,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEtC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,aACA,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,SAAS;CAExD,kBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;CAAc,CAAC;CAE1E,gBAAgB;EACd,MAAM,gBAAgB,UAAyB;GAC7C,IAAI,MAAM,QAAQ,YAAY,UAAU,SACtC,QAAQ;EAEZ;EACA,SAAS,iBAAiB,WAAW,YAAY;EACjD,aAAa;GACX,SAAS,oBAAoB,WAAW,YAAY;EACtD;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,IAAI,CAAC,kBAAkB,OAAO,iCAAI;CAElC,MAAM,WAAW,QAAQ,KAAK;CAG9B,MAAM,sBACJ,uBACG,WAAmD;CAGxD,OAAO,aACL,oBAACA,OAAE,KAAH;EACE,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAiB;GACtD;GACA,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAgB;GACrD;EACF;EACA,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,UAAU;EACZ;EACA,eAAa,CAAC;YAEd,qBAAC,aAAD;GACE,UAAU,MAAM,EAAE,gBAAgB;GAClC,SAAS,EAAE,OAAO,SAAS,KAAM,EAAE;GACnC,SAAS,EAAE,OAAO,SAAS,IAAI,GAAI;GACnC,YAAY,EAAE,UAAU,GAAI;GAC5B,WAAW,cAAc;IAAE;IAAM;GAAU,CAAC;GAC5C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;aAXN,CAcE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,QACV;cAVF,CAYG,YACC,oBAAC,IAAD;KAAI,WAAU;eACX;IACC,IAEL,kBACC,oBAAC,QAAD;KACE;KACA;KACA,OAAM;KACN,WAAU;KACV,UAAU,MAAM;MACd,EAAE,gBAAgB;MAClB,UAAU;KACZ;KACA,MAAM;KACN;IACD,EAEA;OAGL,oBAAC,OAAD;IACE,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,kBACnB;cAIA,oBAAC,OAAD;KACE,WAAW,GACT,sCACA,mBACF;KAEC;IACE;GACF,EACM;;CACR,IACP,gBACF;AACF"}
1	+ {"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/*\n Enumeration of available modal sizes\n /\nexport enum ModalSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n UNSET = 'unset',\n}\n\ntype ModalProps = {\n children: ReactNode;\n isOpen: boolean;\n onClose?: () => void;\n container?: HTMLElement;\n disableScroll?: boolean;\n hasCloseButton?: boolean;\n title?: ReactNode;\n size?: ModalSize \| `${ModalSize}`;\n /\n Defines if the modal content area is scrollable.\n /\n isScrollable?: boolean \| 'x' \| 'y';\n} & Partial<\n Pick<\n ContainerProps,\n \| 'className'\n \| 'transparency'\n \| 'border'\n \| 'background'\n \| 'roundedSize'\n \| 'borderColor'\n \| 'padding'\n \| 'separator'\n \| 'gap'\n >\n>;\n\nconst modalVariants = cva(\n 'flex cursor-default flex-col overflow-hidden shadow-sm',\n {\n variants: {\n size: {\n sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n lg: 'h-auto max-h-[70vh] w-[95vw] max-w-4xl',\n xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n unset: 'h-auto max-h-[95vh] w-[95vw]',\n },\n },\n defaultVariants: {\n size: 'unset',\n },\n }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n none: 'p-0',\n sm: 'px-2 py-4',\n md: 'px-4 py-6',\n lg: 'px-6 py-8',\n xl: 'px-8 py-10',\n '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/\n Modal Component\n \n A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n \n Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n \n @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n * <p>Modal content goes here</p>\n * </Modal>\n * ```\n \n @example\n * With title and close button:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * title=\"Confirm Action\"\n * hasCloseButton\n * size={ModalSize.LG}\n * >\n * <div>\n * <p>Are you sure you want to continue?</p>\n * <Button onClick={onConfirm}>Confirm</Button>\n * </div>\n * </Modal>\n * ```\n \n @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n * isOpen={isOpen}\n * onClose={onClose}\n * container={customContainer}\n * background=\"card\"\n * padding=\"lg\"\n * border=\"default\"\n * >\n * Content with custom styling\n * </Modal>\n * ```\n \n Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n \n @param props - Modal component props\n * @returns JSX element rendered via createPortal\n /\nexport const Modal: FC<ModalProps> = ({\n children,\n isOpen,\n container,\n onClose,\n hasCloseButton = false,\n title,\n size = ModalSize.MD,\n className,\n isScrollable = false, // Enable the scroll of the content\n disableScroll = true, // Disable the scroll of the background\n padding = 'none', // Extract padding here\n ...props\n}) => {\n const containerElement = useGetElementOrWindow(container);\n\n useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isOpen && onClose) {\n onClose();\n }\n };\n document.addEventListener('keydown', handleEscape);\n return () => {\n document.removeEventListener('keydown', handleEscape);\n };\n }, [isOpen, onClose]);\n\n if (!containerElement) return <></>;\n\n const hasTitle = Boolean(title);\n\n // Determine the class for the inner content based on the padding prop\n const contentPaddingClass =\n contentPaddingVariants[\n (padding as keyof typeof contentPaddingVariants) \|\| 'none'\n ];\n\n return createPortal(\n <m.div\n className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n animate={isOpen ? 'visible' : 'invisible'}\n variants={{\n visible: {\n opacity: 1,\n visibility: 'visible',\n transition: { duration: 0.1, when: 'beforeChildren' },\n },\n invisible: {\n opacity: 0,\n visibility: 'hidden',\n transition: { duration: 0.1, when: 'afterChildren' },\n },\n }}\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n aria-hidden={!isOpen}\n >\n <MotionModal\n onClick={(e) => e.stopPropagation()}\n initial={{ scale: isOpen ? 0.5 : 1 }}\n animate={{ scale: isOpen ? 1 : 0.5 }}\n transition={{ duration: 0.3 }}\n className={modalVariants({ size, className })}\n role=\"dialog\"\n aria-modal\n roundedSize=\"4xl\"\n // Force the outer container to have no padding so scrollbars hit the edge\n padding=\"none\"\n {...props}\n >\n {/ HEADER SECTION /}\n <div\n className={cn(\n 'relative flex-none px-4 pt-4',\n hasCloseButton && hasTitle\n ? `flex items-start`\n : hasCloseButton\n ? `flex justify-end`\n : hasTitle\n ? `items-center`\n : `hidden`\n )}\n >\n {hasTitle && (\n <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n {title}\n </H3>\n )}\n {hasCloseButton && (\n <Button\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n label=\"Close modal\"\n className=\"ml-auto\"\n onClick={(e) => {\n e.stopPropagation();\n onClose?.();\n }}\n Icon={X}\n size={ButtonSize.ICON_MD}\n />\n )}\n </div>\n\n {/ SCROLLABLE WRAPPER - Full width, no padding /}\n <div\n className={cn(\n 'flex min-h-0 w-full flex-1 flex-col',\n // Scrollbars will now appear at the very edge of this div (the modal edge)\n isScrollable === true && 'overflow-auto',\n isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n !isScrollable && 'overflow-visible'\n )}\n >\n {/ CONTENT PADDING WRAPPER /}\n {/ We apply the padding class here, effectively putting content inside the scroll area */}\n <div\n className={cn(\n 'flex size-full flex-1 flex-col',\n contentPaddingClass\n )}\n >\n {children}\n </div>\n </div>\n </MotionModal>\n </m.div>,\n containerElement\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,YAAL;CACL;CACA;CACA;CACA;CACA;;AACF;AA8BA,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AAGA,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,cAAcA,OAAE,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEtC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,aACA,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,SAAS;CAExD,kBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;CAAc,CAAC;CAE1E,gBAAgB;EACd,MAAM,gBAAgB,UAAyB;GAC7C,IAAI,MAAM,QAAQ,YAAY,UAAU,SACtC,QAAQ;EAEZ;EACA,SAAS,iBAAiB,WAAW,YAAY;EACjD,aAAa;GACX,SAAS,oBAAoB,WAAW,YAAY;EACtD;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,IAAI,CAAC,kBAAkB,OAAO,iCAAI;CAElC,MAAM,WAAW,QAAQ,KAAK;CAG9B,MAAM,sBACJ,uBACG,WAAmD;CAGxD,OAAO,aACL,oBAACA,OAAE,KAAH;EACE,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAiB;GACtD;GACA,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAgB;GACrD;EACF;EACA,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,UAAU;EACZ;EACA,eAAa,CAAC;YAEd,qBAAC,aAAD;GACE,UAAU,MAAM,EAAE,gBAAgB;GAClC,SAAS,EAAE,OAAO,SAAS,KAAM,EAAE;GACnC,SAAS,EAAE,OAAO,SAAS,IAAI,GAAI;GACnC,YAAY,EAAE,UAAU,GAAI;GAC5B,WAAW,cAAc;IAAE;IAAM;GAAU,CAAC;GAC5C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;aAXN,CAcE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,QACV;cAVF,CAYG,YACC,oBAAC,IAAD;KAAI,WAAU;eACX;IACC,IAEL,kBACC,oBAAC,QAAD;KACE;KACA;KACA,OAAM;KACN,WAAU;KACV,UAAU,MAAM;MACd,EAAE,gBAAgB;MAClB,UAAU;KACZ;KACA,MAAM;KACN;IACD,EAEA;OAGL,oBAAC,OAAD;IACE,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,kBACnB;cAIA,oBAAC,OAAD;KACE,WAAW,GACT,kCACA,mBACF;KAEC;IACE;GACF,EACM;;CACR,IACP,gBACF;AACF"}

package/dist/esm/components/Navbar/MobileNavbar.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,8 +1,8 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

package/dist/esm/components/Pattern/DotPattern.mjs CHANGED Viewed

@@ -94,7 +94,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const DotPattern = ({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	"aria-hidden": "true",
-	className: cn("pointer-events-none absolute inset-0 h-full w-full fill-neutral/30", className),
+	className: cn("pointer-events-none absolute inset-0 size-full fill-neutral/30", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
 		id: "pattern-circle",

package/dist/esm/components/Pattern/DotPattern.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DotPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype DotPatternProps = {\n /* Width of the pattern tile in pixels /\n width?: number;\n /* Height of the pattern tile in pixels /\n height?: number;\n /* Horizontal offset of the pattern /\n x?: number;\n /* Vertical offset of the pattern /\n y?: number;\n /* X coordinate of the dot center within the pattern tile /\n cx?: number;\n /* Y coordinate of the dot center within the pattern tile /\n cy?: number;\n /* Radius of each dot in the pattern /\n cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Dot Pattern Component\n \n A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n \n Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n \n Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n \n Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n \n @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n * <DotPattern />\n * <div className=\"relative z-10\">\n * <h1>Content over dot pattern</h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n * width={24}\n * height={24}\n * cr={1.5}\n * className=\"fill-primary/20\"\n * />\n * ```\n \n @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n * x={8}\n * y={8}\n * cx={2}\n * cy={2}\n * className=\"fill-accent/25\"\n * />\n * ```\n \n @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n * width={32}\n * height={32}\n * cr={2}\n * cx={16}\n * cy={16}\n * className=\"fill-neutral/10\"\n * />\n * ```\n \n Styling Notes:\n * - Use `fill-` classes to customize dot color and opacity\n - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n \n Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n \n @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n width = 16,\n height = 16,\n x = 0,\n y = 0,\n cx = 1,\n cy = 1,\n cr = 1,\n className,\n ...props\n}) => (\n <svg\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 h-full ~~w-full~~ fill-neutral/30',\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id=\"pattern-circle\"\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n patternContentUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <circle cx={cx} cy={cy} r={cr} />\n </pattern>\n </defs>\n <rect\n width=\"100%\"\n height=\"100%\"\n strokeWidth={0}\n fill={`url(#pattern-circle)`}\n />\n </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,cAAmC,EAC9C,QAAQ,IACR,SAAS,IACT,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,~~sEACA~~,SACF;CACA,GAAI;WANN,CAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;EACE,IAAG;EACI;EACC;EACR,cAAa;EACb,qBAAoB;EACjB;EACA;YAEH,oBAAC,UAAD;GAAY;GAAQ;GAAI,GAAG;EAAK;CACzB,GACL,IACN,oBAAC,QAAD;EACE,OAAM;EACN,QAAO;EACP,aAAa;EACb,MAAM;CACP,EACE"}
1	+ {"version":3,"file":"DotPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/*\n Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n /\ntype DotPatternProps = {\n /* Width of the pattern tile in pixels /\n width?: number;\n /* Height of the pattern tile in pixels /\n height?: number;\n /* Horizontal offset of the pattern /\n x?: number;\n /* Vertical offset of the pattern /\n y?: number;\n /* X coordinate of the dot center within the pattern tile /\n cx?: number;\n /* Y coordinate of the dot center within the pattern tile /\n cy?: number;\n /* Radius of each dot in the pattern /\n cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/\n Dot Pattern Component\n \n A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n \n Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n \n Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n \n Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n \n @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n * <DotPattern />\n * <div className=\"relative z-10\">\n * <h1>Content over dot pattern</h1>\n * </div>\n * </div>\n * ```\n \n @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n * width={24}\n * height={24}\n * cr={1.5}\n * className=\"fill-primary/20\"\n * />\n * ```\n \n @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n * x={8}\n * y={8}\n * cx={2}\n * cy={2}\n * className=\"fill-accent/25\"\n * />\n * ```\n \n @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n * width={32}\n * height={32}\n * cr={2}\n * cx={16}\n * cy={16}\n * className=\"fill-neutral/10\"\n * />\n * ```\n \n Styling Notes:\n * - Use `fill-` classes to customize dot color and opacity\n - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n \n Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n \n @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n width = 16,\n height = 16,\n x = 0,\n y = 0,\n cx = 1,\n cy = 1,\n cr = 1,\n className,\n ...props\n}) => (\n <svg\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 size-full fill-neutral/30',\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id=\"pattern-circle\"\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n patternContentUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <circle cx={cx} cy={cy} r={cr} />\n </pattern>\n </defs>\n <rect\n width=\"100%\"\n height=\"100%\"\n strokeWidth={0}\n fill={`url(#pattern-circle)`}\n />\n </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,cAAmC,EAC9C,QAAQ,IACR,SAAS,IACT,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,kEACA,SACF;CACA,GAAI;WANN,CAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;EACE,IAAG;EACI;EACC;EACR,cAAa;EACb,qBAAoB;EACjB;EACA;YAEH,oBAAC,UAAD;GAAY;GAAQ;GAAI,GAAG;EAAK;CACzB,GACL,IACN,oBAAC,QAAD;EACE,OAAM;EACN,QAAO;EACP,aAAa;EACb,MAAM;CACP,EACE"}

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

@@ -1,12 +1,12 @@
 'use client';
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawer } from "./useRightDrawer.mjs";

package/dist/esm/components/Steps/index.mjs ADDED Viewed

@@ -0,0 +1,38 @@
+import { cn } from "../../utils/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Steps/index.tsx
+const Step = ({ number, title, isOptional = false, children, className, ...props }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("relative flex flex-col gap-4 md:pl-14", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "absolute -top-0.5 left-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-lg text-text/70 max-md:hidden",
+			children: /* @__PURE__ */ jsx("span", { children: number })
+		}),
+		/* @__PURE__ */ jsx("div", { className: "absolute top-7.5 left-[1.05rem] h-[calc(100%_+_0.5rem)] border-1 border-text/20 border-l border-dashed last-of-type:hidden max-md:hidden" }),
+		title && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "font-semibold text-lg text-text",
+				children: title
+			}), isOptional && /* @__PURE__ */ jsx("span", {
+				className: "ml-4 rounded-full bg-neutral/15 px-3 py-1 text-text/90 text-xs",
+				children: "Optional"
+			})]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-8",
+			children
+		})
+	]
+});
+const Steps = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-8 [&>*:last-child>div.absolute]:hidden", className),
+	...props,
+	children
+});
+//#endregion
+export { Step, Steps };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Steps/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Steps/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\n\ntype StepProps = HTMLAttributes<HTMLDivElement> & {\n number: number;\n title?: string;\n isOptional?: boolean;\n children: ReactNode;\n};\n\nexport const Step: FC<StepProps> = ({\n number,\n title,\n isOptional = false,\n children,\n className,\n ...props\n}) => (\n <div\n className={cn('relative flex flex-col gap-4 md:pl-14', className)}\n {...props}\n >\n <span className=\"absolute -top-0.5 left-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-lg text-text/70 max-md:hidden\">\n <span>{number}</span>\n </span>\n <div className=\"absolute top-7.5 left-[1.05rem] h-[calc(100%_+_0.5rem)] border-1 border-text/20 border-l border-dashed last-of-type:hidden max-md:hidden\" />\n {title && (\n <div className=\"flex items-center gap-2\">\n <h3 className=\"font-semibold text-lg text-text\">{title}</h3>\n {isOptional && (\n <span className=\"ml-4 rounded-full bg-neutral/15 px-3 py-1 text-text/90 text-xs\">\n Optional\n </span>\n )}\n </div>\n )}\n <div className=\"flex flex-col gap-8\">{children}</div>\n </div>\n);\n\ntype StepsProps = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n};\n\nexport const Steps: FC<StepsProps> = ({ children, className, ...props }) => (\n <div\n className={cn(\n 'flex flex-col gap-8 [&>*:last-child>div.absolute]:hidden',\n className\n )}\n {...props}\n >\n {children}\n </div>\n);\n"],"mappings":";;;;AAUA,MAAa,QAAuB,EAClC,QACA,OACA,aAAa,OACb,UACA,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,WAAW,GAAG,yCAAyC,SAAS;CAChE,GAAI;WAFN;EAIE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,QAAD,YAAO,OAAa;EAChB;EACN,oBAAC,OAAD,EAAK,WAAU,2IAA4I;EAC1J,SACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,MAAD;IAAI,WAAU;cAAmC;GAAU,IAC1D,cACC,oBAAC,QAAD;IAAM,WAAU;cAAiE;GAE3E,EAEL;;EAEP,oBAAC,OAAD;GAAK,WAAU;GAAuB;EAAc;CACjD;;AAOP,MAAa,SAAyB,EAAE,UAAU,WAAW,GAAG,YAC9D,oBAAC,OAAD;CACE,WAAW,GACT,4DACA,SACF;CACA,GAAI;CAEH;AACE"}

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

@@ -91,7 +91,7 @@ const SwitchSelector = (props) => {
 		role: "tablist",
 		"aria-disabled": disabled ? "true" : void 0,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex h-full w-full flex-row items-center justify-center",
+			className: "relative flex size-full flex-row items-center justify-center",
 			children: [choices.map((choice, index) => {
 				const { content, value, ...buttonProps } = choice;
 				const isKeyOfKey = typeof value === "string" || typeof value === "number";

package/dist/esm/components/SwitchSelector/SwitchSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport enum SwitchSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nexport enum SwitchSelectorSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n itemClassName?: string;\n hoverable?: boolean;\n disabled?: boolean;\n [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${SwitchSelectorColor.TEXT}`,\n disabled: false,\n },\n }\n);\n\nexport const choiceVariant = cva(\n 'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [`${SwitchSelectorSize.XS}`]: 'px-2 py-0.5 text-xs',\n [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${SwitchSelectorSize.MD}`,\n },\n }\n);\n\nexport const indicatorVariant = cva(\n 'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]:\n 'bg-primary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.SECONDARY}`]:\n 'bg-secondary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.ERROR}`]:\n 'bg-error data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.NEUTRAL}`]:\n 'bg-neutral data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.LIGHT}`]:\n 'bg-white data-[indicator=true]:text-black',\n [`${SwitchSelectorColor.DARK}`]:\n 'bg-neutral-800 data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.TEXT}`]:\n 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.MD,\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'horizontal'\n );\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex h-full ~~w-full~~ flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;AAAM,GAC/B;CAAE,SAAS;CAAM,OAAO;AAAK,CAC/B;AAEA,IAAY,sBAAL;CACL;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,qBAAL;CACL;CACA;CACA;CACA;;AACF;AAkBA,MAAa,wBAAwB,IACnC,wFACA;CACE,UAAU;EACR,OAAO;IACJ,YAAmC;IACnC,cAAqC;IACrC,YAAmC;IACnC,UAAiC;IACjC,SAAgC;IAChC,SAAgC;EACnC;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B,6LACA;CACE,UAAU,EACR,MAAM;GACH,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;CAChC,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;EACJ,YACC;EACD,cACC;EACD,GAAG,oBAAoB,UACtB;EACD,YACC;EACD,UACC;EACD,SACC;EACD,SACC;AACJ,EACF,EACF,CACF;;;;;AAMA,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,mBACA,aACA,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,YACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,cAAc,EACZ,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}
1	+ {"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport enum SwitchSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nexport enum SwitchSelectorSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n itemClassName?: string;\n hoverable?: boolean;\n disabled?: boolean;\n [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${SwitchSelectorColor.TEXT}`,\n disabled: false,\n },\n }\n);\n\nexport const choiceVariant = cva(\n 'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [`${SwitchSelectorSize.XS}`]: 'px-2 py-0.5 text-xs',\n [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${SwitchSelectorSize.MD}`,\n },\n }\n);\n\nexport const indicatorVariant = cva(\n 'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n [`${SwitchSelectorColor.PRIMARY}`]:\n 'bg-primary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.SECONDARY}`]:\n 'bg-secondary data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.ERROR}`]:\n 'bg-error data-[indicator=true]:text-text',\n [`${SwitchSelectorColor.NEUTRAL}`]:\n 'bg-neutral data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.LIGHT}`]:\n 'bg-white data-[indicator=true]:text-black',\n [`${SwitchSelectorColor.DARK}`]:\n 'bg-neutral-800 data-[indicator=true]:text-white',\n [`${SwitchSelectorColor.TEXT}`]:\n 'bg-text data-[indicator=true]:text-text-opposite',\n },\n },\n }\n);\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.MD,\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'horizontal'\n );\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;AAAM,GAC/B;CAAE,SAAS;CAAM,OAAO;AAAK,CAC/B;AAEA,IAAY,sBAAL;CACL;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,qBAAL;CACL;CACA;CACA;CACA;;AACF;AAkBA,MAAa,wBAAwB,IACnC,wFACA;CACE,UAAU;EACR,OAAO;IACJ,YAAmC;IACnC,cAAqC;IACrC,YAAmC;IACnC,UAAiC;IACjC,SAAgC;IAChC,SAAgC;EACnC;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B,6LACA;CACE,UAAU,EACR,MAAM;GACH,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;GAC7B,OAA6B;CAChC,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;EACJ,YACC;EACD,cACC;EACD,GAAG,oBAAoB,UACtB;EACD,YACC;EACD,UACC;EACD,SACC;EACD,SACC;AACJ,EACF,EACF,CACF;;;;;AAMA,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,mBACA,aACA,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,YACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,cAAc,EACZ,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}

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

@@ -1,8 +1,8 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Table/TableElements.mjs CHANGED Viewed

@@ -15,7 +15,7 @@ const Td = ({ className, ...props }) => /* @__PURE__ */ jsx("td", {
 	...props
 });
 const Hr = ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {
-	className: cn("mx-6 mt-16 text-neutral", className),
+	className: cn("mx-6 mt-16 border-dashed text-neutral", className),
 	...props
 });

package/dist/esm/components/Table/TableElements.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableElements.mjs","names":[],"sources":["../../../../src/components/Table/TableElements.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { ComponentProps } from 'react';\n\nexport const Th = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn(\n 'border border-neutral/20 border-b border-solid bg-neutral/10 p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Tr = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:bg-neutral/10', className)} {...props} />\n);\n\nexport const Td = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn(\n 'border border-neutral/20 border-b border-solid p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Hr = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n"],"mappings":";;;;AAGA,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,oEACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,uBAAuB,SAAS;CAAG,GAAI;AAAQ;AAGnE,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,sDACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;~~CAAI~~,WAAW,GAAG,~~2BAA2B~~,SAAS;~~CAAG~~,GAAI;~~AAAQ~~"}
1	+ {"version":3,"file":"TableElements.mjs","names":[],"sources":["../../../../src/components/Table/TableElements.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { ComponentProps } from 'react';\n\nexport const Th = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn(\n 'border border-neutral/20 border-b border-solid bg-neutral/10 p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Tr = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:bg-neutral/10', className)} {...props} />\n);\n\nexport const Td = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn(\n 'border border-neutral/20 border-b border-solid p-4',\n className\n )}\n {...props}\n />\n);\n\nexport const Hr = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr\n className={cn('mx-6 mt-16 border-dashed text-neutral', className)}\n {...props}\n />\n);\n"],"mappings":";;;;AAGA,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,oEACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,uBAAuB,SAAS;CAAG,GAAI;AAAQ;AAGnE,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,sDACA,SACF;CACA,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GAAG,yCAAyC,SAAS;CAChE,GAAI;AACL"}

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

@@ -214,7 +214,7 @@ const WithResizer = ({ initialWidth, maxWidth, minWidth = 0, handlePosition = "r
 		width
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative h-full w-full max-w-[80%] shrink-0", style && (handlePosition === "right" ? "border-r-[2px]" : "border-l-[2px]"), style && "border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600", minWidth && `min-w-[${minWidth}px]`, maxWidth && `max-w-[${maxWidth}px]`, !style && className),
+		className: cn("relative size-full max-w-[80%] shrink-0", style && (handlePosition === "right" ? "border-r-[2px]" : "border-l-[2px]"), style && "border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600", minWidth && `min-w-[${minWidth}px]`, maxWidth && `max-w-[${maxWidth}px]`, !style && className),
 		style: {
 			width: `${width}px`,
 			transition: isResizing ? "none" : "width 200ms ease-in-out"

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

	@@ -1 +1 @@
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\nconst HANDLE_DOUBLE_CLICK_ZONE_PX = 16;\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 /* Apply base styles /\n style?: boolean;\n /* Additional className /\n className?: string;\n /* Controlled open/close — true expands to defaultOpenWidth (or last used), false collapses to 0 /\n isOpen?: boolean;\n /* Width to restore when isOpen becomes true and current width is 0 /\n defaultOpenWidth?: number;\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 style = true,\n className,\n isOpen,\n defaultOpenWidth,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [width, setWidth] = useState(initialWidth);\n const [isResizing, setIsResizing] = useState(false);\n const lastExpandedWidthRef = useRef(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 setIsResizing(false);\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 if (isOpen === false) return;\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 setIsResizing(true);\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 [isOpen, 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 useEffect(() => {\n if (width > minWidth) {\n lastExpandedWidthRef.current = width;\n }\n }, [width, minWidth]);\n\n useEffect(() => {\n if (isOpen === undefined) return;\n if (!isOpen) {\n setWidth(0);\n } else {\n const target =\n lastExpandedWidthRef.current > 0\n ? lastExpandedWidthRef.current\n : (defaultOpenWidth ?? initialWidth);\n setWidth(Math.max(target, minWidth));\n }\n }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleDoubleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n const el = containerRef.current;\n if (!el) return;\n\n const { left, right } = el.getBoundingClientRect();\n const inHandleZone =\n handlePosition === 'right'\n ? right - event.clientX <= HANDLE_DOUBLE_CLICK_ZONE_PX\n : event.clientX - left <= HANDLE_DOUBLE_CLICK_ZONE_PX;\n\n if (!inHandleZone) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n if (width > minWidth) {\n setWidth(minWidth);\n return;\n }\n\n const target = Math.min(\n Math.max(lastExpandedWidthRef.current, minWidth),\n maxWidth ?? Infinity\n );\n setWidth(target);\n },\n [handlePosition, maxWidth, minWidth, width]\n );\n\n return (\n <div\n className={cn(\n 'relative h-full w-full max-w-[80%] shrink-0',\n style &&\n (handlePosition === 'right' ? 'border-r-[2px]' : 'border-l-[2px]'),\n style &&\n 'border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600',\n minWidth && `min-w-[${minWidth}px]`,\n maxWidth && `max-w-[${maxWidth}px]`,\n !style && className\n )}\n style={{\n width: `${width}px`,\n transition: isResizing ? 'none' : 'width 200ms ease-in-out',\n }}\n ref={containerRef}\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 {/ biome-ignore lint/a11y/noStaticElementInteractions: Invisible handle strip — owns resize events so content stopPropagation doesn't block them */}\n <div\n role=\"presentation\"\n className={cn(\n 'absolute top-0 z-10 h-full w-3',\n isOpen !== false ? 'cursor-ew-resize' : 'cursor-default',\n handlePosition === 'right' ? 'right-0' : 'left-0'\n )}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n onDoubleClick={handleDoubleClick}\n />\n </div>\n );\n};\n"],"mappings":"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"}
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\nconst HANDLE_DOUBLE_CLICK_ZONE_PX = 16;\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 /* Apply base styles /\n style?: boolean;\n /* Additional className /\n className?: string;\n /* Controlled open/close — true expands to defaultOpenWidth (or last used), false collapses to 0 /\n isOpen?: boolean;\n /* Width to restore when isOpen becomes true and current width is 0 /\n defaultOpenWidth?: number;\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 style = true,\n className,\n isOpen,\n defaultOpenWidth,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [width, setWidth] = useState(initialWidth);\n const [isResizing, setIsResizing] = useState(false);\n const lastExpandedWidthRef = useRef(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 setIsResizing(false);\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 if (isOpen === false) return;\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 setIsResizing(true);\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 [isOpen, 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 useEffect(() => {\n if (width > minWidth) {\n lastExpandedWidthRef.current = width;\n }\n }, [width, minWidth]);\n\n useEffect(() => {\n if (isOpen === undefined) return;\n if (!isOpen) {\n setWidth(0);\n } else {\n const target =\n lastExpandedWidthRef.current > 0\n ? lastExpandedWidthRef.current\n : (defaultOpenWidth ?? initialWidth);\n setWidth(Math.max(target, minWidth));\n }\n }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n const handleDoubleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n const el = containerRef.current;\n if (!el) return;\n\n const { left, right } = el.getBoundingClientRect();\n const inHandleZone =\n handlePosition === 'right'\n ? right - event.clientX <= HANDLE_DOUBLE_CLICK_ZONE_PX\n : event.clientX - left <= HANDLE_DOUBLE_CLICK_ZONE_PX;\n\n if (!inHandleZone) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n if (width > minWidth) {\n setWidth(minWidth);\n return;\n }\n\n const target = Math.min(\n Math.max(lastExpandedWidthRef.current, minWidth),\n maxWidth ?? Infinity\n );\n setWidth(target);\n },\n [handlePosition, maxWidth, minWidth, width]\n );\n\n return (\n <div\n className={cn(\n 'relative size-full max-w-[80%] shrink-0',\n style &&\n (handlePosition === 'right' ? 'border-r-[2px]' : 'border-l-[2px]'),\n style &&\n 'border-neutral-200 transition active:border-neutral-400 dark:border-neutral-950 dark:active:border-neutral-600',\n minWidth && `min-w-[${minWidth}px]`,\n maxWidth && `max-w-[${maxWidth}px]`,\n !style && className\n )}\n style={{\n width: `${width}px`,\n transition: isResizing ? 'none' : 'width 200ms ease-in-out',\n }}\n ref={containerRef}\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 {/ biome-ignore lint/a11y/noStaticElementInteractions: Invisible handle strip — owns resize events so content stopPropagation doesn't block them */}\n <div\n role=\"presentation\"\n className={cn(\n 'absolute top-0 z-10 h-full w-3',\n isOpen !== false ? 'cursor-ew-resize' : 'cursor-default',\n handlePosition === 'right' ? 'right-0' : 'left-0'\n )}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n onDoubleClick={handleDoubleClick}\n />\n </div>\n );\n};\n"],"mappings":"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"}

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

@@ -109,6 +109,7 @@ import { GridPattern } from "./Pattern/GridPattern.mjs";
 import { Spotlight } from "./Pattern/SpotLight.mjs";
 import { drawerManager, useRightDrawer } from "./RightDrawer/useRightDrawer.mjs";
 import { RightDrawer } from "./RightDrawer/RightDrawer.mjs";
+import { Step, Steps } from "./Steps/index.mjs";
 import { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize } from "./Tag/index.mjs";
 import { TechLogoName } from "./TechLogo/types.mjs";
 import { TechLogo } from "./TechLogo/TechLogo.mjs";
@@ -118,4 +119,4 @@ import { Modes } from "./ThemeSwitcherDropDown/types.mjs";
 import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
-export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, BitbucketLogo, Breadcrumb, Browser, Burger, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditor, ContentSelector, CopyButton, CopyToClipboard, DesktopNavbar, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, GitHubLogo, GitLabLogo, GoogleLogo, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeightResizer, HideShow, Hr, 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, MarkDownIframe, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, 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, SmartTable, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Td, TechLogo, TechLogoName, techLogos_exports as TechLogos, Terminal, TextArea, TextEditor, TextEditorContainer, Th, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, VersionSwitcher, VersionSwitcherProvider, VerticalSwitchSelector, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, reducer, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };
+export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, BitbucketLogo, Breadcrumb, Browser, Burger, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditor, ContentSelector, CopyButton, CopyToClipboard, DesktopNavbar, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, GitHubLogo, GitLabLogo, GoogleLogo, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeightResizer, HideShow, Hr, 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, MarkDownIframe, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, 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, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Td, TechLogo, TechLogoName, techLogos_exports as TechLogos, Terminal, TextArea, TextEditor, TextEditorContainer, Th, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, VersionSwitcher, VersionSwitcherProvider, VerticalSwitchSelector, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, reducer, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };

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

@@ -1,16 +1,16 @@
-import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
-import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useScrollY } from "./useScrollY.mjs";
-import { usePersistedStore } from "./usePersistedStore.mjs";
-import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
 import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useSearch } from "./useSearch.mjs";
-import { useIsMounted } from "./useIsMounted.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
+import { usePersistedStore } from "./usePersistedStore.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 { useKeyboardDetector } from "./useKeyboardDetector.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";
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch };

package/dist/types/api/useIntlayerAPI.d.ts CHANGED Viewed

@@ -9,13 +9,13 @@ type UseIntlayerAuthProps = {
 };
 declare const useIntlayerOAuthOptions: (props?: UseIntlayerAuthProps) => {
   options: {
+    method?: string;
+    mode?: RequestMode;
+    headers: HeadersInit;
     cache?: RequestCache;
     credentials?: RequestCredentials;
-    headers: HeadersInit;
     integrity?: string;
     keepalive?: boolean;
-    method?: string;
-    mode?: RequestMode;
     priority?: RequestPriority;
     redirect?: RequestRedirect;
     referrer?: string;

package/dist/types/components/Badge/index.d.ts CHANGED Viewed

@@ -41,9 +41,9 @@ declare enum BadgeSize {
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: "error" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark" | "success" | "custom";
-  variant?: "default" | "none" | "outline" | "hoverable";
-  size?: "md" | "sm" | "lg";
+  color?: "error" | "custom" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark" | "success";
+  variant?: "default" | "hoverable" | "none" | "outline";
+  size?: "sm" | "md" | "lg";
 } & import("class-variance-authority/types").ClassProp) => string;
 /**
  * Badge component props interface

package/dist/types/components/Button/Button.d.ts CHANGED Viewed

@@ -59,10 +59,10 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "md" | "xs" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "error" | "text" | "primary" | "secondary" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse" | "success" | "custom";
-  roundedSize?: "md" | "sm" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "default" | "input" | "none" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "error" | "custom" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text-inverse" | "success" | "card" | "current";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | "4xl" | "5xl";
+  variant?: "input" | "default" | "invisible-link" | "hoverable" | "none" | "outline" | "link" | "fade";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & import("class-variance-authority/types").ClassProp) => string;

package/dist/types/components/Carousel/index.d.ts CHANGED Viewed

@@ -13,7 +13,9 @@ type CarouselProps = HTMLAttributes<HTMLDivElement> & {
   onIndexChange?: (index: number) => void;
 };
 declare const Carousel: FC<CarouselProps> & {
-  Item: FC<CarouselItemProps>;
+  Item: FC<CarouselItemProps> & {
+    isCarouselItem: true;
+  };
   Indicators: FC<CarouselIndicatorsProps>;
 };
 //#endregion

package/dist/types/components/Carousel/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"mappings":";;;KA0GK,iBAAA,GAAoB,cAAA,CAAe,cAAA;EACtC,QAAA,EAAU,SAAA;AAAA;AAAA,~~KAkBP~~,uBAAA,GAA0B,cAAc,CAAC,cAAA;EAC5C,wBAAA;AAAA;AAAA,KAgHG,aAAA,GAAgB,cAAA,CAAe,cAAA;EAClC,QAAA,EAAU,SAAA;EACV,YAAA;EACA,aAAA,IAAiB,KAAA;AAAA;AAAA,~~cAkPN~~,QAAA,EAAQ,EAAA,CAAA,aAAA"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"mappings":";;;KA0GK,iBAAA,GAAoB,cAAA,CAAe,cAAA;EACtC,QAAA,EAAU,SAAA;AAAA;AAAA,KAgBP,uBAAA,GAA0B,cAAc,CAAC,cAAA;EAC5C,wBAAA;AAAA;AAAA,KAgHG,aAAA,GAAgB,cAAA,CAAe,cAAA;EAClC,QAAA,EAAU,SAAA;EACV,YAAA;EACA,aAAA,IAAiB,KAAA;AAAA;AAAA,cAsPN,QAAA,EAAQ,EAAA,CAAA,aAAA"}

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts CHANGED Viewed

@@ -3,9 +3,9 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
 declare const collapsibleTableVariants: (props?: {
-  size?: "md" | "sm" | "lg" | "xl" | "full";
-  variant?: "default" | "dark" | "ghost" | "outlined";
-  spacing?: "auto" | "md" | "sm" | "lg" | "none";
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+  variant?: "default" | "ghost" | "dark" | "outlined";
+  spacing?: "sm" | "md" | "lg" | "none" | "auto";
 } & import("class-variance-authority/types").ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */

package/dist/types/components/Command/index.d.ts CHANGED Viewed

@@ -33,45 +33,45 @@ declare const Command: {
   } & import("react").RefAttributes<HTMLInputElement>>;
   List: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
   } & import("react").RefAttributes<HTMLDivElement>>;
   Empty: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & import("react").RefAttributes<HTMLDivElement>>;
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & import("react").RefAttributes<HTMLDivElement>>;
   Group: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "value" | "heading"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
   } & import("react").RefAttributes<HTMLDivElement>>;
-  Separator: FC<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  Separator: FC<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
   } & import("react").RefAttributes<HTMLDivElement>>;
   Item: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "onSelect" | "disabled" | "value"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "onSelect" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/types/components/Container/index.d.ts CHANGED Viewed

@@ -7,14 +7,14 @@ import { VariantProps } from "class-variance-authority";
  * Provides flexible styling options for background, padding, borders, and layout
  */
 declare const containerVariants: (props?: {
-  roundedSize?: "md" | "sm" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "full";
-  transparency?: "md" | "xs" | "sm" | "lg" | "xl" | "none" | "full";
-  padding?: "md" | "sm" | "lg" | "xl" | "2xl" | "none";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full" | "4xl";
+  transparency?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "full";
+  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
   separator?: "without" | "x" | "y" | "both";
   border?: "with" | "none";
-  borderColor?: "error" | "text" | "success" | "primary" | "secondary" | "neutral" | "card" | "warning";
-  background?: "with" | "none" | "hoverable";
-  gap?: "md" | "sm" | "lg" | "xl" | "2xl" | "none";
+  borderColor?: "error" | "text" | "primary" | "secondary" | "neutral" | "success" | "card" | "warning";
+  background?: "with" | "hoverable" | "none";
+  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
 } & import("class-variance-authority/types").ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {

package/dist/types/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.d.ts CHANGED Viewed

@@ -8,8 +8,8 @@ declare const useDictionaryDetailsSchema: (projectId: string) => z.ZodObject<{
   projectIds: z.ZodDefault<z.ZodArray<z.ZodString>>;
   tags: z.ZodDefault<z.ZodArray<z.ZodString>>;
   location: z.ZodOptional<z.ZodEnum<{
-    local: "local";
     remote: "remote";
+    local: "local";
     hybrid: "hybrid";
     plugin: "plugin";
   }>>;