@intlayer/design-system 3.5.4 → 3.5.6

package/dist/components/Modal/Modal.mjs

@@ -21,11 +21,11 @@ const modalVariants = cva(
   {
     variants: {
       variant: {
-        sm: "w-full max-h-[30vh] max-w-[30vw]",
-        md: "w-full max-h-[50vh] max-w-[50vw]",
-        lg: "w-full max-h-[70vh] max-w-[70vw]",
-        xl: "w-full max-h-[95vh] max-w-[95vw]",
-        unset: "max-h-[95vh] max-w-[95vw]"
+        sm: "max-h-[30vh] w-[95vw] max-w-xl",
+        md: "max-h-[50vh] w-[95vw] max-w-xl",
+        lg: "max-h-[70vh] w-[95vw] max-w-2xl",
+        xl: "max-h-[95vh] w-[95vw] max-w-3xl",
+        unset: "max-h-[95vh] w-[95vw]"
       }
     },
     defaultVariants: {
@@ -42,7 +42,7 @@ const Modal = ({
   onClose,
   hasCloseButton = false,
   title,
-  size = "unset",
+  size = "md",
   ...props
 }) => {
   const containerElement = useGetElementOrWindow(container);
@@ -62,7 +62,7 @@ const Modal = ({
         transition: { duration: 0.1 },
         onClick: (e) => {
           e.stopPropagation();
-          onClose();
+          onClose?.();
         },
         "aria-hidden": !isOpen,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -72,11 +72,9 @@ const Modal = ({
             initial: { scale: isOpen ? 0.5 : 1 },
             animate: { scale: isOpen ? 1 : 0.5 },
             transition: { duration: 0.3 },
-            className: cn(
-              modalVariants({
-                variant: size
-              })
-            ),
+            className: modalVariants({
+              variant: size
+            }),
             role: "dialog",
             "aria-modal": true,
             roundedSize: "2xl",
@@ -98,7 +96,7 @@ const Modal = ({
                         className: "right-2 top-2 ml-auto cursor-pointer",
                         onClick: (e) => {
                           e.stopPropagation();
-                          onClose();
+                          onClose?.();
                         }
                       }
                     )

package/dist/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<ContainerProps, 'transparency'>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'w-full max-h-[30vh] max-w-[30vw]',\n        md: 'w-full max-h-[50vh] max-w-[50vw]',\n        lg: 'w-full max-h-[70vh] max-w-[70vw]',\n        xl: 'w-full max-h-[95vh] max-w-[95vw]',\n        unset: 'max-h-[95vh] max-w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'unset',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\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={cn(\n          modalVariants({\n            variant: size,\n          })\n        )}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["jsx","Fragment","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAIA,MAAM,cAAc,OAAO,OAAO,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASA,sCAAAC,kBAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACLD,kCAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACV,kBAAA;AAAA,QACV;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW;AAAA,cACT,cAAc;AAAA,gBACZ,SAAS;AAAA,cACV,CAAA;AAAA,YACH;AAAA,YACA,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEF,kCAAA,IAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCA,kCAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACV,kCAAA;AAAA,wBAAA;AAAA,sBACV;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCA,kCAAAA,IAAA,OAAA,EAAI,WAAU,6DACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;"}
+{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<ContainerProps, 'transparency'>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'max-h-[95vh] w-[95vw] max-w-3xl',\n        unset: 'max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\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({\n          variant: size,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["jsx","Fragment","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAIA,MAAM,cAAc,OAAO,OAAO,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASA,sCAAAC,kBAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACLD,kCAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACR,oBAAA;AAAA,QACZ;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW,cAAc;AAAA,cACvB,SAAS;AAAA,YAAA,CACV;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEF,kCAAA,IAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCA,kCAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACR,oCAAA;AAAA,wBAAA;AAAA,sBACZ;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCA,kCAAAA,IAAA,OAAA,EAAI,WAAU,6DACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/components/Navbar/DesktopNavbar.cjs

@@ -9,7 +9,7 @@ const DesktopNavbar = ({
   rightItems,
   selectedChoice
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-full items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
     logo,
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
       components_TabSelector_TabSelector.TabSelector,

package/dist/components/Navbar/DesktopNavbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.cjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx","TabSelector"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,2BAAA,kBAAA;AAAA,MAACC,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECD,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,WAAA,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"DesktopNavbar.cjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-full items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx","TabSelector"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,8IACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,2BAAA,kBAAA;AAAA,MAACC,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECD,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,WAAA,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/Navbar/DesktopNavbar.mjs

@@ -7,7 +7,7 @@ const DesktopNavbar = ({
   rightItems,
   selectedChoice
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-full items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
     logo,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       TabSelector,

package/dist/components/Navbar/DesktopNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECA,kCAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,WAAA,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-full items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,8IACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECA,kCAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,WAAA,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/SwitchSelector/index.cjs

@@ -86,6 +86,10 @@ const SwitchSelector = ({
     setValue(newValue);
     onChange?.(newValue);
   };
+  require$$0.useEffect(() => {
+    if (value === void 0) return;
+    setValue(value);
+  }, [value]);
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     "div",
     {

package/dist/components/SwitchSelector/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\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 = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\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"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useRef,\n  type ReactNode,\n  type HTMLAttributes,\n  useState,\n  useEffect,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\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 = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\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"],"names":["cva","useState","useRef","useItemSelector","useEffect","jsx","jsxs","value","createElement","cn"],"mappings":"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"}

package/dist/components/SwitchSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAU,KAAK,SAAS,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACtC,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE,KAAK,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IACtC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,qBAAqB;;8EAsB1B,CAAC;AAEF,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAuBF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,uEAQ7B,mBAAmB,CAAC,CAAC,CAAC,4CAiExB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACtC,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE,KAAK,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IACtC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,qBAAqB;;8EAsB1B,CAAC;AAEF,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAuBF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,uEAQ7B,mBAAmB,CAAC,CAAC,CAAC,4CAsExB,CAAC"}

package/dist/components/SwitchSelector/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
-import { useState, useRef, createElement } from "react";
+import { useState, useRef, useEffect, createElement } from "react";
 import { cva } from "class-variance-authority";
 import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
@@ -84,6 +84,10 @@ const SwitchSelector = ({
     setValue(newValue);
     onChange?.(newValue);
   };
+  useEffect(() => {
+    if (value === void 0) return;
+    setValue(value);
+  }, [value]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {

package/dist/components/SwitchSelector/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\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 = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\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"],"names":["jsx","jsxs","value"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IAER;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,EACtC;AACM,QAAA,cAAc,OAA4B,EAAE;AAC5C,QAAA,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4B,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,EACrB;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,gBACD,CAAA;AAAA,cACH;AAAA,cACA,KAAK,aAAaA,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,cAAA;AAAA,YAC/B;AAAA,YAEC;AAAA,UACH;AAAA,QAAA,CAEH;AAAA,QACA,2BACCF,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cACD,CAAA;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,EAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  useRef,\n  type ReactNode,\n  type HTMLAttributes,\n  useState,\n  useEffect,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n  'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        primary:\n          'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n        secondary:\n          'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n        destructive:\n          'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n        neutral:\n          'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst choiceVariant = cva(\n  'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n  {\n    variants: {\n      size: {\n        sm: 'py-1 px-2 text-xs',\n        md: 'p-2 text-sm',\n        lg: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary:\n          'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n        secondary:\n          'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n        destructive:\n          'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n        neutral:\n          'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n        light: 'bg-white aria-selected:text-black',\n        dark: 'bg-neutral-800 aria-selected:text-white',\n        text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = 'primary',\n  size = 'md',\n  className,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        className,\n      })}\n      role=\"tablist\"\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 = value === valueState;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                })\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected}\n              disabled={isSelected}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n            >\n              {content}\n            </button>\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"],"names":["jsx","jsxs","value"],"mappings":"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"}

package/dist/components/index.cjs

@@ -12,8 +12,9 @@ const components_DictionaryEditor_DictionaryEditor = require("./DictionaryEditor
 const components_DictionaryFieldEditor_DictionariesSelector_DictionariesSelector = require("./DictionaryFieldEditor/DictionariesSelector/DictionariesSelector.cjs");
 const components_DictionaryFieldEditor_DictionaryCreationForm_DictionaryCreationForm = require("./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.cjs");
 const components_DictionaryFieldEditor_DictionaryFieldEditor = require("./DictionaryFieldEditor/DictionaryFieldEditor.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcher = require("./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.cjs");
+const components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext = require("./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.cjs");
 const components_DropDown_index = require("./DropDown/index.cjs");
-const components_LocaleSwitcherDropDown_LocaleSwitcher = require("./LocaleSwitcherDropDown/LocaleSwitcher.cjs");
 const components_ThemeSwitcherDropDown_DesktopThemeSwitcher = require("./ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs");
 const components_ThemeSwitcherDropDown_MobileThemeSwitcher = require("./ThemeSwitcherDropDown/MobileThemeSwitcher.cjs");
 const components_ThemeSwitcherDropDown_types = require("./ThemeSwitcherDropDown/types.cjs");
@@ -24,7 +25,7 @@ const components_Navbar_index = require("./Navbar/index.cjs");
 const components_ProfileDropDown_index = require("./ProfileDropDown/index.cjs");
 const components_Avatar_index = require("./Avatar/index.cjs");
 const components_Logo_index = require("./Logo/index.cjs");
-const components_IDE_CodeRender = require("./IDE/CodeRender.cjs");
+const components_IDE_Code = require("./IDE/Code.cjs");
 const components_IDE_IDE = require("./IDE/IDE.cjs");
 const components_IDE_FileList = require("./IDE/FileList.cjs");
 const components_Popover_index = require("./Popover/index.cjs");
@@ -75,6 +76,11 @@ const components_EditableField_EditableFieldInput = require("./EditableField/Edi
 const components_EditableField_EditableFieldTextArea = require("./EditableField/EditableFieldTextArea.cjs");
 const components_Tag_index = require("./Tag/index.cjs");
 const components_Accordion_Accordion = require("./Accordion/Accordion.cjs");
+const components_LocaleSwitcherDropDown_LocaleSwitcher = require("./LocaleSwitcherDropDown/LocaleSwitcher.cjs");
+const components_LocaleSwitcherContentDropDown_LocaleSwitcherContent = require("./LocaleSwitcherContentDropDown/LocaleSwitcherContent.cjs");
+const components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext = require("./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.cjs");
+const components_ClickOutsideDiv_index = require("./ClickOutsideDiv/index.cjs");
+const utils_dictionary = require("../utils/dictionary.cjs");
 exports.MaxHeightSmoother = components_MaxHeightSmoother_index.MaxHeightSmoother;
 exports.MaxWidthSmoother = components_MaxWidthSmoother_index.MaxWidthSmoother;
 exports.RightDrawer = components_RightDrawer_RightDrawer.RightDrawer;
@@ -87,8 +93,10 @@ exports.DictionaryEditor = components_DictionaryEditor_DictionaryEditor.Dictiona
 exports.DictionariesSelector = components_DictionaryFieldEditor_DictionariesSelector_DictionariesSelector.DictionariesSelector;
 exports.DictionaryCreationForm = components_DictionaryFieldEditor_DictionaryCreationForm_DictionaryCreationForm.DictionaryCreationForm;
 exports.DictionaryFieldEditor = components_DictionaryFieldEditor_DictionaryFieldEditor.DictionaryFieldEditor;
+exports.VersionSwitcher = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcher.VersionSwitcher;
+exports.VersionSwitcherProvider = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext.VersionSwitcherProvider;
+exports.useVersionSwitcher = components_DictionaryFieldEditor_VersionSwitcherDropDown_VersionSwitcherContext.useVersionSwitcher;
 exports.DropDown = components_DropDown_index.DropDown;
-exports.LocaleSwitcher = components_LocaleSwitcherDropDown_LocaleSwitcher.LocaleSwitcher;
 exports.DesktopThemeSwitcher = components_ThemeSwitcherDropDown_DesktopThemeSwitcher.DesktopThemeSwitcher;
 exports.MobileThemeSwitcher = components_ThemeSwitcherDropDown_MobileThemeSwitcher.MobileThemeSwitcher;
 exports.Modes = components_ThemeSwitcherDropDown_types.Modes;
@@ -99,7 +107,7 @@ exports.Navbar = components_Navbar_index.Navbar;
 exports.ProfileDropDown = components_ProfileDropDown_index.ProfileDropDown;
 exports.Avatar = components_Avatar_index.Avatar;
 exports.Logo = components_Logo_index.Logo;
-exports.Code = components_IDE_CodeRender.Code;
+exports.Code = components_IDE_Code.Code;
 exports.IDE = components_IDE_IDE.IDE;
 exports.FileList = components_IDE_FileList.FileList;
 exports.Popover = components_Popover_index.Popover;
@@ -153,6 +161,7 @@ exports.toast = components_Toaster_useToast.toast;
 exports.useToast = components_Toaster_useToast.useToast;
 exports.Toaster = components_Toaster_Toaster.Toaster;
 exports.Link = components_Link_Link.Link;
+exports.checkIsExternalLink = components_Link_Link.checkIsExternalLink;
 exports.TabSelector = components_TabSelector_TabSelector.TabSelector;
 exports.Badge = components_Badge_index.Badge;
 exports.badgeVariants = components_Badge_index.badgeVariants;
@@ -171,4 +180,12 @@ exports.EditableFieldInput = components_EditableField_EditableFieldInput.Editabl
 exports.EditableFieldTextArea = components_EditableField_EditableFieldTextArea.EditableFieldTextArea;
 exports.Tag = components_Tag_index.Tag;
 exports.Accordion = components_Accordion_Accordion.Accordion;
+exports.LocaleSwitcher = components_LocaleSwitcherDropDown_LocaleSwitcher.LocaleSwitcher;
+exports.LocaleSwitcherContent = components_LocaleSwitcherContentDropDown_LocaleSwitcherContent.LocaleSwitcherContent;
+exports.LocaleSwitcherContentProvider = components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext.LocaleSwitcherContentProvider;
+exports.useLocaleSwitcherContent = components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext.useLocaleSwitcherContent;
+exports.ClickOutsideDiv = components_ClickOutsideDiv_index.ClickOutsideDiv;
+exports.editDictionaryByKeyPath = utils_dictionary.editDictionaryByKeyPath;
+exports.getDictionaryValueByKeyPath = utils_dictionary.getDictionaryValueByKeyPath;
+exports.renameDictionaryValueByKeyPath = utils_dictionary.renameDictionaryValueByKeyPath;
 //# sourceMappingURL=index.cjs.map

package/dist/components/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/index.d.ts

@@ -6,7 +6,6 @@ export * from './ContentSelector';
 export * from './DictionaryEditor';
 export * from './DictionaryFieldEditor';
 export * from './DropDown';
-export * from './LocaleSwitcherDropDown';
 export * from './ThemeSwitcherDropDown';
 export * from './Button';
 export * from './Container';
@@ -41,4 +40,7 @@ export * from './CopyToClipboard';
 export * from './EditableField';
 export * from './Tag';
 export * from './Accordion';
+export * from './LocaleSwitcherDropDown';
+export * from './LocaleSwitcherContentDropDown';
+export * from './ClickOutsideDiv';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mBAAmB,CAAC"}

package/dist/components/index.mjs

@@ -10,8 +10,9 @@ import { DictionaryEditor } from "./DictionaryEditor/DictionaryEditor.mjs";
 import { DictionariesSelector } from "./DictionaryFieldEditor/DictionariesSelector/DictionariesSelector.mjs";
 import { DictionaryCreationForm } from "./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs";
 import { DictionaryFieldEditor } from "./DictionaryFieldEditor/DictionaryFieldEditor.mjs";
+import { VersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs";
+import { VersionSwitcherProvider, useVersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs";
 import { DropDown } from "./DropDown/index.mjs";
-import { LocaleSwitcher } from "./LocaleSwitcherDropDown/LocaleSwitcher.mjs";
 import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
 import { Modes } from "./ThemeSwitcherDropDown/types.mjs";
@@ -22,7 +23,7 @@ import { Navbar } from "./Navbar/index.mjs";
 import { ProfileDropDown } from "./ProfileDropDown/index.mjs";
 import { Avatar } from "./Avatar/index.mjs";
 import { Logo } from "./Logo/index.mjs";
-import { Code } from "./IDE/CodeRender.mjs";
+import { Code } from "./IDE/Code.mjs";
 import { IDE } from "./IDE/IDE.mjs";
 import { FileList } from "./IDE/FileList.mjs";
 import { Popover } from "./Popover/index.mjs";
@@ -59,7 +60,7 @@ import { useUser } from "./Auth/useUser/index.mjs";
 import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./Toaster/Toast.mjs";
 import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
 import { Toaster } from "./Toaster/Toaster.mjs";
-import { Link } from "./Link/Link.mjs";
+import { Link, checkIsExternalLink } from "./Link/Link.mjs";
 import { TabSelector } from "./TabSelector/TabSelector.mjs";
 import { Badge, badgeVariants } from "./Badge/index.mjs";
 import { MultiSelect } from "./Select/Multiselect.mjs";
@@ -73,6 +74,11 @@ import { EditableFieldInput } from "./EditableField/EditableFieldInput.mjs";
 import { EditableFieldTextArea } from "./EditableField/EditableFieldTextArea.mjs";
 import { Tag } from "./Tag/index.mjs";
 import { Accordion } from "./Accordion/Accordion.mjs";
+import { LocaleSwitcher } from "./LocaleSwitcherDropDown/LocaleSwitcher.mjs";
+import { LocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
+import { LocaleSwitcherContentProvider, useLocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
+import { ClickOutsideDiv } from "./ClickOutsideDiv/index.mjs";
+import { editDictionaryByKeyPath, getDictionaryValueByKeyPath, renameDictionaryValueByKeyPath } from "../utils/dictionary.mjs";
 export {
   Accordion,
   AuthModal,
@@ -84,6 +90,7 @@ export {
   Button,
   ChangePasswordForm,
   Checkbox,
+  ClickOutsideDiv,
   Code,
   Command,
   CommandRoot,
@@ -120,6 +127,8 @@ export {
   Link,
   Loader,
   LocaleSwitcher,
+  LocaleSwitcherContent,
+  LocaleSwitcherContentProvider,
   Logo,
   MarkdownRenderer,
   MaxHeightSmoother,
@@ -152,11 +161,17 @@ export {
   ToastTitle,
   ToastViewport,
   Toaster,
+  VersionSwitcher,
+  VersionSwitcherProvider,
   WithResizer,
   badgeVariants,
+  checkIsExternalLink,
   checkboxVariants,
+  editDictionaryByKeyPath,
+  getDictionaryValueByKeyPath,
   inputVariants,
   reducer,
+  renameDictionaryValueByKeyPath,
   toast,
   useAuth,
   useChangePasswordSchema,
@@ -164,11 +179,13 @@ export {
   useEditionPanelStore,
   useForm,
   useFormField,
+  useLocaleSwitcherContent,
   useResetPasswordSchema,
   useRightDrawerStore,
   useSignInSchema,
   useSignUpSchema,
   useToast,
-  useUser
+  useUser,
+  useVersionSwitcher
 };
 //# sourceMappingURL=index.mjs.map

package/dist/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}