@intlayer/design-system 5.1.4 → 5.1.6

package/dist/components/IDE/FileTree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileTree.cjs","sources":["../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["useState","path","jsxs","Fragment","cn","jsx","ChevronRight","MaxHeightSmoother","createFileTree"],"mappings":";;;;;;;;;AAeA,MAAM,iBAAiB,CAAC,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,IAAI;AAE7C,QAAA,QAAQ,SAAS,SAAS;AAChC,QAAM,cAAc,eAAe;AAAA,IACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAClC;AAAA,EAAA,CACD;AACD,QAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;AAEpD,QAAM,oBAAoB,WACvB;AAAA,IACC,CAACC,UAASA,MAAK,QAAQ,QAAQ,EAAE;AAAA;AAAA,EAAA,EAElC,OAAO,CAAC,aAAa,SAAS,WAAW,WAAW,CAAC;AAExD,QAAM,UAAU,kBAAkB;AAAA,IAAI,CAACA,UACrCA,MAAK,QAAQ,aAAa,EAAE,EAAE,QAAQ,QAAQ,EAAE;AAAA,EAClD;AAEA,QAAM,WAAW,cAAc;AAEzB,QAAA,cAAc,IAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,EAAE;AAEvD,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAD,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,SAAA;AAAA,UACT;AAAA,UACA,WACI,uCACA;AAAA,QACN;AAAA,QAEA,SAAS,MAAM;AACb,cAAI,QAAQ;AACV,0BAAc,SAAS;AAAA,UAAA,OAClB;AACL,2BAAe,CAAC,WAAW;AAAA,UAAA;AAAA,QAE/B;AAAA,QAEA,UAAA;AAAA,UAAAC,2BAAAA,IAAC,UAAK,WAAWD,YAAG,kBAAkB,UAAU,MAAM,GACnD,UACH,aAAA;AAAA,UAEC,CAAC,UACAC,2BAAA;AAAA,YAACC,YAAA;AAAA,YAAA;AAAA,cACC,WAAWF,SAAA,GAAG,cAAc,eAAe,qBAAqB;AAAA,cAChE,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAnBI;AAAA,IAoBP;AAAA,IACC,WACCC,2BAAA;AAAA,MAACE,mCAAA;AAAA,MAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,WAAU;AAAA,QAEV,UAAAF,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,UAAU,CAAC,GAAG,UAAU,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AAEO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAA;AACb,MAAM;AACE,QAAA,WAAWG,6CAAe,UAAU;AAGxC,SAAAH,2BAAA,IAAC,OAAI,EAAA,WAAU,8FACZ,UAAA,SAAS,IAAI,CAAC,EAAE,MAAM,SAAS,OAC9B,MAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPK;AAAA,EASR,CAAA,GACH;AAEJ;;"}
+{"version":3,"file":"FileTree.cjs","sources":["../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"text-neutral flex size-full flex-col items-start justify-start py-1\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["useState","path","jsxs","Fragment","cn","jsx","ChevronRight","MaxHeightSmoother","createFileTree"],"mappings":";;;;;;;;;AAeA,MAAM,iBAAiB,CAAC,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,IAAI;AAE7C,QAAA,QAAQ,SAAS,SAAS;AAChC,QAAM,cAAc,eAAe;AAAA,IACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAClC;AAAA,EAAA,CACD;AACD,QAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;AAEpD,QAAM,oBAAoB,WACvB;AAAA,IACC,CAACC,UAASA,MAAK,QAAQ,QAAQ,EAAE;AAAA;AAAA,EAAA,EAElC,OAAO,CAAC,aAAa,SAAS,WAAW,WAAW,CAAC;AAExD,QAAM,UAAU,kBAAkB;AAAA,IAAI,CAACA,UACrCA,MAAK,QAAQ,aAAa,EAAE,EAAE,QAAQ,QAAQ,EAAE;AAAA,EAClD;AAEA,QAAM,WAAW,cAAc;AAEzB,QAAA,cAAc,IAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,EAAE;AAEvD,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAD,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,SAAA;AAAA,UACT;AAAA,UACA,WACI,uCACA;AAAA,QACN;AAAA,QAEA,SAAS,MAAM;AACb,cAAI,QAAQ;AACV,0BAAc,SAAS;AAAA,UAAA,OAClB;AACL,2BAAe,CAAC,WAAW;AAAA,UAAA;AAAA,QAE/B;AAAA,QAEA,UAAA;AAAA,UAAAC,2BAAAA,IAAC,UAAK,WAAWD,YAAG,kBAAkB,UAAU,MAAM,GACnD,UACH,aAAA;AAAA,UAEC,CAAC,UACAC,2BAAA;AAAA,YAACC,YAAA;AAAA,YAAA;AAAA,cACC,WAAWF,SAAA,GAAG,cAAc,eAAe,qBAAqB;AAAA,cAChE,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAnBI;AAAA,IAoBP;AAAA,IACC,WACCC,2BAAA;AAAA,MAACE,mCAAA;AAAA,MAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,WAAU;AAAA,QAEV,UAAAF,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,UAAU,CAAC,GAAG,UAAU,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AAEO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAA;AACb,MAAM;AACE,QAAA,WAAWG,6CAAe,UAAU;AAGxC,SAAAH,2BAAA,IAAC,OAAI,EAAA,WAAU,uEACZ,UAAA,SAAS,IAAI,CAAC,EAAE,MAAM,SAAS,OAC9B,MAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPK;AAAA,EASR,CAAA,GACH;AAEJ;;"}

package/dist/components/IDE/FileTree.mjs

@@ -85,7 +85,7 @@ const FileTree = ({
   prePaths = []
 }) => {
   const fileTree = createFileTree(filesPaths);
-  return /* @__PURE__ */ jsx("div", { className: "text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1", children: fileTree.map(({ path, subPath, isFile }) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "text-neutral flex size-full flex-col items-start justify-start py-1", children: fileTree.map(({ path, subPath, isFile }) => /* @__PURE__ */ jsx(
     FileItem,
     {
       isFile,

package/dist/components/IDE/FileTree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileTree.mjs","sources":["../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"text-neutral dark:text-neutral-dark flex size-full flex-col items-start justify-start py-1\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["path"],"mappings":";;;;;;;AAeA,MAAM,iBAAiB,CAAC,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AAE7C,QAAA,QAAQ,SAAS,SAAS;AAChC,QAAM,cAAc,eAAe;AAAA,IACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAClC;AAAA,EAAA,CACD;AACD,QAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;AAEpD,QAAM,oBAAoB,WACvB;AAAA,IACC,CAACA,UAASA,MAAK,QAAQ,QAAQ,EAAE;AAAA;AAAA,EAAA,EAElC,OAAO,CAAC,aAAa,SAAS,WAAW,WAAW,CAAC;AAExD,QAAM,UAAU,kBAAkB;AAAA,IAAI,CAACA,UACrCA,MAAK,QAAQ,aAAa,EAAE,EAAE,QAAQ,QAAQ,EAAE;AAAA,EAClD;AAEA,QAAM,WAAW,cAAc;AAEzB,QAAA,cAAc,IAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,EAAE;AAEvD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WACI,uCACA;AAAA,QACN;AAAA,QAEA,SAAS,MAAM;AACb,cAAI,QAAQ;AACV,0BAAc,SAAS;AAAA,UAAA,OAClB;AACL,2BAAe,CAAC,WAAW;AAAA,UAAA;AAAA,QAE/B;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,UAAK,WAAW,GAAG,kBAAkB,UAAU,MAAM,GACnD,UACH,aAAA;AAAA,UAEC,CAAC,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,cAAc,eAAe,qBAAqB;AAAA,cAChE,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAnBI;AAAA,IAoBP;AAAA,IACC,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,UAAU,CAAC,GAAG,UAAU,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AAEO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAA;AACb,MAAM;AACE,QAAA,WAAW,eAAe,UAAU;AAGxC,SAAA,oBAAC,OAAI,EAAA,WAAU,8FACZ,UAAA,SAAS,IAAI,CAAC,EAAE,MAAM,SAAS,OAC9B,MAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPK;AAAA,EASR,CAAA,GACH;AAEJ;"}
+{"version":3,"file":"FileTree.mjs","sources":["../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n  filesPaths: string[];\n  activeFile?: string;\n  onClickFile?: (filePath: string) => void;\n  prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n  filesPaths: string[];\n  subPath?: FilePath[];\n  path: string;\n  onClickFile?: (title: string) => void;\n  activeFile?: string;\n  prePaths: string[];\n  isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n  filesPaths,\n  path,\n  subPath,\n  onClickFile,\n  activeFile,\n  prePaths,\n  isFile,\n}) => {\n  const [subPathOpen, setSubPathOpen] = useState(true);\n\n  const level = prePaths.length + 1;\n  const currentPath = concatFilePath([\n    ...prePaths.slice(level - 1, level),\n    path,\n  ]);\n  const totalPath = concatFilePath([...prePaths, path]);\n\n  const filteredFilePaths = filesPaths\n    .map(\n      (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n    )\n    .filter((filePath) => filePath.startsWith(currentPath));\n\n  const newPath = filteredFilePaths.map((path) =>\n    path.replace(currentPath, '').replace(/^\\/?/, '')\n  );\n\n  const isActive = totalPath === activeFile;\n\n  const indentation = new Array(level).fill('  ').join('');\n\n  return (\n    <>\n      <button\n        className={cn(\n          'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n          isActive\n            ? 'bg-neutral-200 dark:bg-neutral-700'\n            : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n        )}\n        key={path}\n        onClick={() => {\n          if (isFile) {\n            onClickFile?.(totalPath);\n          } else {\n            setSubPathOpen(!subPathOpen);\n          }\n        }}\n      >\n        <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n          {indentation}\n        </span>\n\n        {!isFile && (\n          <ChevronRight\n            className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n            size={16}\n          />\n        )}\n        {path}\n      </button>\n      {subPath && (\n        <MaxHeightSmoother\n          isHidden={!subPathOpen}\n          className=\"overflow-x-hidden\"\n        >\n          <FileTree\n            filesPaths={newPath}\n            activeFile={activeFile}\n            onClickFile={onClickFile}\n            prePaths={[...prePaths, path]}\n          />\n        </MaxHeightSmoother>\n      )}\n    </>\n  );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n  filesPaths,\n  activeFile,\n  onClickFile,\n  prePaths = [],\n}) => {\n  const fileTree = createFileTree(filesPaths);\n\n  return (\n    <div className=\"text-neutral flex size-full flex-col items-start justify-start py-1\">\n      {fileTree.map(({ path, subPath, isFile }) => (\n        <FileItem\n          key={path}\n          isFile={isFile}\n          subPath={subPath}\n          path={path}\n          onClickFile={onClickFile}\n          activeFile={activeFile}\n          prePaths={prePaths}\n          filesPaths={filesPaths}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["path"],"mappings":";;;;;;;AAeA,MAAM,iBAAiB,CAAC,UAAoB,MAAM,KAAK,GAAG;AAY1D,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AAE7C,QAAA,QAAQ,SAAS,SAAS;AAChC,QAAM,cAAc,eAAe;AAAA,IACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAClC;AAAA,EAAA,CACD;AACD,QAAM,YAAY,eAAe,CAAC,GAAG,UAAU,IAAI,CAAC;AAEpD,QAAM,oBAAoB,WACvB;AAAA,IACC,CAACA,UAASA,MAAK,QAAQ,QAAQ,EAAE;AAAA;AAAA,EAAA,EAElC,OAAO,CAAC,aAAa,SAAS,WAAW,WAAW,CAAC;AAExD,QAAM,UAAU,kBAAkB;AAAA,IAAI,CAACA,UACrCA,MAAK,QAAQ,aAAa,EAAE,EAAE,QAAQ,QAAQ,EAAE;AAAA,EAClD;AAEA,QAAM,WAAW,cAAc;AAEzB,QAAA,cAAc,IAAI,MAAM,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,EAAE;AAEvD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WACI,uCACA;AAAA,QACN;AAAA,QAEA,SAAS,MAAM;AACb,cAAI,QAAQ;AACV,0BAAc,SAAS;AAAA,UAAA,OAClB;AACL,2BAAe,CAAC,WAAW;AAAA,UAAA;AAAA,QAE/B;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,UAAK,WAAW,GAAG,kBAAkB,UAAU,MAAM,GACnD,UACH,aAAA;AAAA,UAEC,CAAC,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,cAAc,eAAe,qBAAqB;AAAA,cAChE,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAnBI;AAAA,IAoBP;AAAA,IACC,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,CAAC;AAAA,QACX,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,UAAU,CAAC,GAAG,UAAU,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AAEO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAA;AACb,MAAM;AACE,QAAA,WAAW,eAAe,UAAU;AAGxC,SAAA,oBAAC,OAAI,EAAA,WAAU,uEACZ,UAAA,SAAS,IAAI,CAAC,EAAE,MAAM,SAAS,OAC9B,MAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAPK;AAAA,EASR,CAAA,GACH;AAEJ;"}

package/dist/components/IDE/IDE.cjs

@@ -12,12 +12,16 @@ const IDE = ({
   pages: initialPages,
   isDarkMode,
   className,
+  activeTab: defaultActiveTab,
   ...props
 }) => {
   const [pages, setPages] = ReactExports.useState(initialPages);
   const tabs = pages.filter(({ isOpen }) => isOpen);
   const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);
-  const [activeTab, setActiveTab] = ReactExports.useState(firstTabIndex);
+  const [activeTab, setActiveTab] = ReactExports.useState(defaultActiveTab ?? firstTabIndex);
+  ReactExports.useEffect(() => {
+    setActiveTab(defaultActiveTab ?? firstTabIndex);
+  }, [initialPages, defaultActiveTab]);
   const { content, path } = pages[activeTab];
   const filePaths = initialPages.map(({ path: title }) => title);
   const handleClickFile = (title) => {
@@ -46,7 +50,7 @@ const IDE = ({
       transparency: "none",
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-red-500" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
@@ -61,7 +65,7 @@ const IDE = ({
               {
                 className: utils_cn.cn(
                   "flex h-8 min-w-20 items-center justify-start px-3 py-1 transition",
-                  isActive ? "bg-card dark:bg-card-dark" : "dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"
+                  isActive ? "bg-card" : "cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"
                 ),
                 onClick: () => setActiveTab(index),
                 children: title

package/dist/components/IDE/IDE.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IDE.cjs","sources":["../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(firstTabIndex);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card dark:bg-card-dark'\n                    : 'dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute left-0 top-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["useState","page","jsxs","Container","cn","jsx","path","WithResizer","FileTree","MarkdownRenderer"],"mappings":";;;;;;;;;;AAkBO,MAAM,MAAoB,CAAC;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAIA,aAAAA,SAAS,YAAY;AAC/C,QAAM,OAAO,MAAM,OAAO,CAAC,EAAE,aAAa,MAAM;AAEhD,QAAM,gBAAgB,KAAK,UAAU,CAAC,EAAE,aAAa,MAAM;AAC3D,QAAM,CAAC,WAAW,YAAY,IAAIA,aAAAA,SAAS,aAAa;AAExD,QAAM,EAAE,SAAS,SAAS,MAAM,SAAS;AACnC,QAAA,YAAY,aAAa,IAAI,CAAC,EAAE,MAAM,YAAY,KAAK;AAEvD,QAAA,kBAAkB,CAAC,UAAkB;AACnC,UAAA,OAAO,MAAM,KAAK,CAAC,EAAE,MAAM,SAAA,MAAe,aAAa,KAAK;AAClE,QAAI,CAAC,KAAM;AAEX,UAAM,WAAW,MAAM,IAAI,CAACC,UAAS;AAC/BA,UAAAA,MAAK,SAAS,OAAO;AACvB,eAAO,EAAE,GAAGA,OAAM,QAAQ,KAAK;AAAA,MAAA;AAE1BA,aAAAA;AAAAA,IAAA,CACR;AAED,aAAS,QAAQ;AAEjB,UAAM,eAAe,SAAS;AAAA,MAC5B,CAAC,EAAE,MAAM,eAAe,aAAa;AAAA,IACvC;AAEA,iBAAa,YAAY;AAAA,EAC3B;AAGE,SAAAC,2BAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAY;AAAA,MACZ,cAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAAA;AAAA,QAACF,2BAAAA,KAAA,OAAA,EAAI,WAAU,sJACb,UAAA;AAAA,UAACA,2BAAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,YAACG,2BAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,YAChDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,YACnDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,UAAA,GACpD;AAAA,UACAA,2BAAAA,IAAC,OAAI,EAAA,WAAU,kCACZ,UAAA,KAAK,IAAI,CAAC,EAAE,MAAAC,MAAK,GAAG,UAAU;AACvB,kBAAA,WAAWA,MAAK,MAAM,GAAG;AAC/B,kBAAM,QAAQ,SAAS,SAAS,SAAS,CAAC;AAC1C,kBAAM,WAAW,UAAU;AAGzB,mBAAAD,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWD,SAAA;AAAA,kBACT;AAAA,kBACA,WACI,8BACA;AAAA,gBACN;AAAA,gBAEA,SAAS,MAAM,aAAa,KAAK;AAAA,gBAEhC,UAAA;AAAA,cAAA;AAAA,cAHI;AAAA,YAIP;AAAA,UAAA,CAEH,EACH,CAAA;AAAA,QAAA,GACF;AAAA,QACAC,2BAAA,IAAC,OAAI,EAAA,WAAU,yDACb,UAAAA,2BAAA,IAAC,OAAI,EAAA,WAAU,mCACb,UAAAH,gCAAC,OAAI,EAAA,WAAU,kBACb,UAAA;AAAA,UAACG,2BAAAA,IAAAE,6BAAAA,aAAA,EAAY,cAAc,KACzB,UAAAF,2BAAA;AAAA,YAACG,wBAAA;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,aAAa;AAAA,YAAA;AAAA,UAAA,GAEjB;AAAA,UAEAH,2BAAAA,IAAC,SAAI,WAAU,+CACb,yCAACI,8BAAAA,kBAAiB,EAAA,YACf,kBACH,CAAA,EACF,CAAA;AAAA,QAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"IDE.cjs","sources":["../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, useState, type FC, useEffect } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute left-0 top-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["useState","useEffect","page","jsxs","Container","cn","jsx","path","WithResizer","FileTree","MarkdownRenderer"],"mappings":"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"}

package/dist/components/IDE/IDE.d.ts

@@ -6,6 +6,7 @@ export type IDEProps = {
         isOpen?: boolean;
     }[];
     isDarkMode?: boolean;
+    activeTab?: number;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const IDE: FC<IDEProps>;
 //# sourceMappingURL=IDE.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IDE.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/IDE.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAO/D,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CA+F5B,CAAC"}
+{"version":3,"file":"IDE.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/IDE.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,EAAE,EAAa,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAoG5B,CAAC"}

package/dist/components/IDE/IDE.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { cn } from "../../utils/cn.mjs";
 import { Container } from "../Container/index.mjs";
 import { WithResizer } from "../WithResizer/index.mjs";
@@ -10,12 +10,16 @@ const IDE = ({
   pages: initialPages,
   isDarkMode,
   className,
+  activeTab: defaultActiveTab,
   ...props
 }) => {
   const [pages, setPages] = useState(initialPages);
   const tabs = pages.filter(({ isOpen }) => isOpen);
   const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);
-  const [activeTab, setActiveTab] = useState(firstTabIndex);
+  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);
+  useEffect(() => {
+    setActiveTab(defaultActiveTab ?? firstTabIndex);
+  }, [initialPages, defaultActiveTab]);
   const { content, path } = pages[activeTab];
   const filePaths = initialPages.map(({ path: title }) => title);
   const handleClickFile = (title) => {
@@ -44,7 +48,7 @@ const IDE = ({
       transparency: "none",
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950", children: [
           /* @__PURE__ */ jsxs("div", { className: "mx-2 flex items-center justify-start gap-2 p-1", children: [
             /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
             /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
@@ -59,7 +63,7 @@ const IDE = ({
               {
                 className: cn(
                   "flex h-8 min-w-20 items-center justify-start px-3 py-1 transition",
-                  isActive ? "bg-card dark:bg-card-dark" : "dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"
+                  isActive ? "bg-card" : "cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"
                 ),
                 onClick: () => setActiveTab(index),
                 children: title

package/dist/components/IDE/IDE.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IDE.mjs","sources":["../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(firstTabIndex);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"text-neutral dark:text-neutral-dark flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card dark:bg-card-dark'\n                    : 'dark:hover:bg-card-dark cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute left-0 top-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["page","path"],"mappings":";;;;;;;;AAkBO,MAAM,MAAoB,CAAC;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,OAAO,MAAM,OAAO,CAAC,EAAE,aAAa,MAAM;AAEhD,QAAM,gBAAgB,KAAK,UAAU,CAAC,EAAE,aAAa,MAAM;AAC3D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAExD,QAAM,EAAE,SAAS,SAAS,MAAM,SAAS;AACnC,QAAA,YAAY,aAAa,IAAI,CAAC,EAAE,MAAM,YAAY,KAAK;AAEvD,QAAA,kBAAkB,CAAC,UAAkB;AACnC,UAAA,OAAO,MAAM,KAAK,CAAC,EAAE,MAAM,SAAA,MAAe,aAAa,KAAK;AAClE,QAAI,CAAC,KAAM;AAEX,UAAM,WAAW,MAAM,IAAI,CAACA,UAAS;AAC/BA,UAAAA,MAAK,SAAS,OAAO;AACvB,eAAO,EAAE,GAAGA,OAAM,QAAQ,KAAK;AAAA,MAAA;AAE1BA,aAAAA;AAAAA,IAAA,CACR;AAED,aAAS,QAAQ;AAEjB,UAAM,eAAe,SAAS;AAAA,MAC5B,CAAC,EAAE,MAAM,eAAe,aAAa;AAAA,IACvC;AAEA,iBAAa,YAAY;AAAA,EAC3B;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAY;AAAA,MACZ,cAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,sJACb,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,YAChD,oBAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,YACnD,oBAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,UAAA,GACpD;AAAA,UACA,oBAAC,OAAI,EAAA,WAAU,kCACZ,UAAA,KAAK,IAAI,CAAC,EAAE,MAAAC,MAAK,GAAG,UAAU;AACvB,kBAAA,WAAWA,MAAK,MAAM,GAAG;AAC/B,kBAAM,QAAQ,SAAS,SAAS,SAAS,CAAC;AAC1C,kBAAM,WAAW,UAAU;AAGzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,WACI,8BACA;AAAA,gBACN;AAAA,gBAEA,SAAS,MAAM,aAAa,KAAK;AAAA,gBAEhC,UAAA;AAAA,cAAA;AAAA,cAHI;AAAA,YAIP;AAAA,UAAA,CAEH,EACH,CAAA;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,OAAI,EAAA,WAAU,yDACb,UAAA,oBAAC,OAAI,EAAA,WAAU,mCACb,UAAA,qBAAC,OAAI,EAAA,WAAU,kBACb,UAAA;AAAA,UAAC,oBAAA,aAAA,EAAY,cAAc,KACzB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,aAAa;AAAA,YAAA;AAAA,UAAA,GAEjB;AAAA,UAEA,oBAAC,SAAI,WAAU,+CACb,8BAAC,kBAAiB,EAAA,YACf,kBACH,CAAA,EACF,CAAA;AAAA,QAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"IDE.mjs","sources":["../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type HTMLAttributes, useState, type FC, useEffect } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute left-0 top-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"names":["page","path"],"mappings":";;;;;;;;AAmBO,MAAM,MAAoB,CAAC;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,OAAO,MAAM,OAAO,CAAC,EAAE,aAAa,MAAM;AAEhD,QAAM,gBAAgB,KAAK,UAAU,CAAC,EAAE,aAAa,MAAM;AAC3D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,oBAAoB,aAAa;AAE5E,YAAU,MAAM;AACd,iBAAa,oBAAoB,aAAa;AAAA,EAAA,GAC7C,CAAC,cAAc,gBAAgB,CAAC;AAEnC,QAAM,EAAE,SAAS,SAAS,MAAM,SAAS;AACnC,QAAA,YAAY,aAAa,IAAI,CAAC,EAAE,MAAM,YAAY,KAAK;AAEvD,QAAA,kBAAkB,CAAC,UAAkB;AACnC,UAAA,OAAO,MAAM,KAAK,CAAC,EAAE,MAAM,SAAA,MAAe,aAAa,KAAK;AAClE,QAAI,CAAC,KAAM;AAEX,UAAM,WAAW,MAAM,IAAI,CAACA,UAAS;AAC/BA,UAAAA,MAAK,SAAS,OAAO;AACvB,eAAO,EAAE,GAAGA,OAAM,QAAQ,KAAK;AAAA,MAAA;AAE1BA,aAAAA;AAAAA,IAAA,CACR;AAED,aAAS,QAAQ;AAEjB,UAAM,eAAe,SAAS;AAAA,MAC5B,CAAC,EAAE,MAAM,eAAe,aAAa;AAAA,IACvC;AAEA,iBAAa,YAAY;AAAA,EAC3B;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAY;AAAA,MACZ,cAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,+HACb,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,YAChD,oBAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,YACnD,oBAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,UAAA,GACpD;AAAA,UACA,oBAAC,OAAI,EAAA,WAAU,kCACZ,UAAA,KAAK,IAAI,CAAC,EAAE,MAAAC,MAAK,GAAG,UAAU;AACvB,kBAAA,WAAWA,MAAK,MAAM,GAAG;AAC/B,kBAAM,QAAQ,SAAS,SAAS,SAAS,CAAC;AAC1C,kBAAM,WAAW,UAAU;AAGzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,WACI,YACA;AAAA,gBACN;AAAA,gBAEA,SAAS,MAAM,aAAa,KAAK;AAAA,gBAEhC,UAAA;AAAA,cAAA;AAAA,cAHI;AAAA,YAIP;AAAA,UAAA,CAEH,EACH,CAAA;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,OAAI,EAAA,WAAU,yDACb,UAAA,oBAAC,OAAI,EAAA,WAAU,mCACb,UAAA,qBAAC,OAAI,EAAA,WAAU,kBACb,UAAA;AAAA,UAAC,oBAAA,aAAA,EAAY,cAAc,KACzB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,aAAa;AAAA,YAAA;AAAA,UAAA,GAEjB;AAAA,UAEA,oBAAC,SAAI,WAAU,+CACb,8BAAC,kBAAiB,EAAA,YACf,kBACH,CAAA,EACF,CAAA;AAAA,QAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Input/Checkbox.cjs

@@ -19,16 +19,16 @@ const checkboxVariants = classVarianceAuthority.cva("", {
       lg: "size-6"
     },
     color: {
-      primary: "accent-primary dark:accent-primary-dark",
-      secondary: "accent-secondary dark:accent-secondary-dark",
-      destructive: "accent-destructive dark:accent-destructive-dark",
-      neutral: "accent-neutral dark:accent-neutral-dark",
-      light: "accent-light dark:accent-light-dark",
-      text: "accent-text dark:accent-text-dark",
-      dark: "accent-dark dark:accent-dark-dark",
-      error: "accent-error dark:accent-error-dark",
-      success: "accent-success dark:accent-success-dark",
-      custom: "accent-custom dark:accent-custom-dark"
+      primary: "accent-primary",
+      secondary: "accent-secondary",
+      destructive: "accent-destructive",
+      neutral: "accent-neutral",
+      light: "accent-light",
+      text: "accent-text",
+      dark: "accent-dark",
+      error: "accent-error",
+      success: "accent-success",
+      custom: "accent-custom"
     },
     validationStyleEnabled: {
       disabled: "",
@@ -71,7 +71,6 @@ const Checkbox = ({
     /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, children: label })
   ] });
 };
-Checkbox.displayName = "Checkbox";
 exports.Checkbox = Checkbox;
 exports.checkboxVariants = checkboxVariants;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/Input/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary dark:accent-primary-dark',\n      secondary: 'accent-secondary dark:accent-secondary-dark',\n      destructive: 'accent-destructive dark:accent-destructive-dark',\n      neutral: 'accent-neutral dark:accent-neutral-dark',\n      light: 'accent-light dark:accent-light-dark',\n      text: 'accent-text dark:accent-text-dark',\n      dark: 'accent-dark dark:accent-dark-dark',\n      error: 'accent-error dark:accent-error-dark',\n      success: 'accent-success dark:accent-success-dark',\n      custom: 'accent-custom dark:accent-custom-dark',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["cva","useId","jsxs","Fragment","jsx"],"mappings":";;;;;AAQa,MAAA,mBAAmBA,2BAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKC,aAAAA,MAAM;AACjB,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACCA,2BAAA,IAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;AAEA,SAAS,cAAc;;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary',\n      secondary: 'accent-secondary',\n      destructive: 'accent-destructive',\n      neutral: 'accent-neutral',\n      light: 'accent-light',\n      text: 'accent-text',\n      dark: 'accent-dark',\n      error: 'accent-error',\n      success: 'accent-success',\n      custom: 'accent-custom',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n"],"names":["cva","useId","jsxs","Fragment","jsx"],"mappings":";;;;;AAQa,MAAA,mBAAmBA,2BAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKC,aAAAA,MAAM;AACjB,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACCA,2BAAA,IAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;;;"}

package/dist/components/Input/Checkbox.d.ts

@@ -3,7 +3,7 @@ import { FC, DetailedHTMLProps, InputHTMLAttributes } from 'react';
 export declare const checkboxVariants: (props?: ({
     variant?: "default" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
-    color?: "text" | "light" | "dark" | "success" | "error" | "primary" | "secondary" | "destructive" | "neutral" | "custom" | null | undefined;
+    color?: "text" | "error" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "success" | "custom" | null | undefined;
     validationStyleEnabled?: "disabled" | "enabled" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CheckboxProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'size'> & {

package/dist/components/Input/Checkbox.mjs

@@ -17,16 +17,16 @@ const checkboxVariants = cva("", {
       lg: "size-6"
     },
     color: {
-      primary: "accent-primary dark:accent-primary-dark",
-      secondary: "accent-secondary dark:accent-secondary-dark",
-      destructive: "accent-destructive dark:accent-destructive-dark",
-      neutral: "accent-neutral dark:accent-neutral-dark",
-      light: "accent-light dark:accent-light-dark",
-      text: "accent-text dark:accent-text-dark",
-      dark: "accent-dark dark:accent-dark-dark",
-      error: "accent-error dark:accent-error-dark",
-      success: "accent-success dark:accent-success-dark",
-      custom: "accent-custom dark:accent-custom-dark"
+      primary: "accent-primary",
+      secondary: "accent-secondary",
+      destructive: "accent-destructive",
+      neutral: "accent-neutral",
+      light: "accent-light",
+      text: "accent-text",
+      dark: "accent-dark",
+      error: "accent-error",
+      success: "accent-success",
+      custom: "accent-custom"
     },
     validationStyleEnabled: {
       disabled: "",
@@ -69,7 +69,6 @@ const Checkbox = ({
     /* @__PURE__ */ jsx("label", { htmlFor: id, children: label })
   ] });
 };
-Checkbox.displayName = "Checkbox";
 export {
   Checkbox,
   checkboxVariants

package/dist/components/Input/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary dark:accent-primary-dark',\n      secondary: 'accent-secondary dark:accent-secondary-dark',\n      destructive: 'accent-destructive dark:accent-destructive-dark',\n      neutral: 'accent-neutral dark:accent-neutral-dark',\n      light: 'accent-light dark:accent-light-dark',\n      text: 'accent-text dark:accent-text-dark',\n      dark: 'accent-dark dark:accent-dark-dark',\n      error: 'accent-error dark:accent-error-dark',\n      success: 'accent-success dark:accent-success-dark',\n      custom: 'accent-custom dark:accent-custom-dark',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":";;;AAQa,MAAA,mBAAmB,IAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AACjB,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACC,oBAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary',\n      secondary: 'accent-secondary',\n      destructive: 'accent-destructive',\n      neutral: 'accent-neutral',\n      light: 'accent-light',\n      text: 'accent-text',\n      dark: 'accent-dark',\n      error: 'accent-error',\n      success: 'accent-success',\n      custom: 'accent-custom',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;AAQa,MAAA,mBAAmB,IAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AACjB,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACC,oBAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;"}

package/dist/components/Input/Input.cjs

@@ -6,22 +6,22 @@ const inputVariants = classVarianceAuthority.cva("", {
   variants: {
     variant: {
       default: [
-        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
-        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus",
-        "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all",
+        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+        "aria-[invalid=true]:border-error",
         "disabled:opacity-50"
       ],
       invisible: [
-        "w-full border-none bg-inherit text-inherit outline-none ring-0"
+        "w-full border-none bg-inherit text-inherit outline-hidden ring-0"
       ]
     },
     size: {
-      md: "px-2 py-1 max-md:py-3",
-      lg: "px-4 py-2 max-md:py-4"
+      md: "px-2 md:py-1 py-3",
+      lg: "p-4 md:py-2"
     },
     validationStyleEnabled: {
       disabled: "",
-      enabled: "valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark"
+      enabled: "valid:border-success invalid:border-error"
     }
   },
   defaultVariants: {

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":["cva","jsx"],"mappings":";;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IAAA;AAAA,EAEN;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-hidden ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 md:py-1 py-3',\n      lg: 'p-4 md:py-2',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":["cva","jsx"],"mappings":";;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,KAAK,EAAE,EACP,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,aAAa;;;;8EA4BxB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,iBAAiB,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,GAAG;IACF,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,EAAE,wBAAwB,CAAC,CAAC;AAEvE,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAgBhC,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,KAAK,EAAE,EACP,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,aAAa;;;;8EA2BxB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,iBAAiB,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,gBAAgB,CACjB,GAAG;IACF,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,EAAE,wBAAwB,CAAC,CAAC;AAEvE,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAgBhC,CAAC"}

package/dist/components/Input/Input.mjs

@@ -4,22 +4,22 @@ const inputVariants = cva("", {
   variants: {
     variant: {
       default: [
-        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
-        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus",
-        "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all",
+        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+        "aria-[invalid=true]:border-error",
         "disabled:opacity-50"
       ],
       invisible: [
-        "w-full border-none bg-inherit text-inherit outline-none ring-0"
+        "w-full border-none bg-inherit text-inherit outline-hidden ring-0"
       ]
     },
     size: {
-      md: "px-2 py-1 max-md:py-3",
-      lg: "px-4 py-2 max-md:py-4"
+      md: "px-2 md:py-1 py-3",
+      lg: "p-4 md:py-2"
     },
     validationStyleEnabled: {
       disabled: "",
-      enabled: "valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark"
+      enabled: "valid:border-success invalid:border-error"
     }
   },
   defaultVariants: {

package/dist/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IAAA;AAAA,EAEN;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;"}
+{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-hidden ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 md:py-1 py-3',\n      lg: 'p-4 md:py-2',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;"}

package/dist/components/Input/InputPassword.cjs

@@ -25,7 +25,7 @@ const InputPassword = (props) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           EyeIconComponent,
           {
-            className: "text-neutral dark:text-neutral-dark mr-2 inline-block",
+            className: "text-neutral mr-2 inline-block",
             size: 20
           }
         )

package/dist/components/Input/InputPassword.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.cjs","sources":["../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, useState, type MouseEventHandler } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input {...props} type={isPasswordRevealed ? 'text' : 'password'} />\n\n      <button\n        data-testid=\"eye-icon\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"text-neutral dark:text-neutral-dark mr-2 inline-block\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"names":["useState","isPasswordRevealed","EyeIcon","EyeOffIcon","jsxs","jsx","Input"],"mappings":";;;;;;;AAQa,MAAA,gBAAwC,CAAC,UAAU;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,IAAIA,aAAAA,SAAS,KAAK;AAE5D,QAAA,uBAA6D,CAAC,MAAM;AACxE,MAAE,eAAe;AACjB,MAAE,gBAAgB;AACI,0BAAA,CAACC,wBAAuB,CAACA,mBAAkB;AAAA,EACnE;AAEM,QAAA,mBAAmB,qBAAqBC,YAAAA,UAAUC,YAAA;AAGtD,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAAC,+BAACC,uBAAAA,SAAO,GAAG,OAAO,MAAM,qBAAqB,SAAS,YAAY;AAAA,IAElED,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAY,qBAAqB,kBAAkB;AAAA,QAEnD,UAAAA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;"}
+{"version":3,"file":"InputPassword.cjs","sources":["../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, useState, type MouseEventHandler } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input {...props} type={isPasswordRevealed ? 'text' : 'password'} />\n\n      <button\n        data-testid=\"eye-icon\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"text-neutral mr-2 inline-block\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"names":["useState","isPasswordRevealed","EyeIcon","EyeOffIcon","jsxs","jsx","Input"],"mappings":";;;;;;;AAQa,MAAA,gBAAwC,CAAC,UAAU;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,IAAIA,aAAAA,SAAS,KAAK;AAE5D,QAAA,uBAA6D,CAAC,MAAM;AACxE,MAAE,eAAe;AACjB,MAAE,gBAAgB;AACI,0BAAA,CAACC,wBAAuB,CAACA,mBAAkB;AAAA,EACnE;AAEM,QAAA,mBAAmB,qBAAqBC,YAAAA,UAAUC,YAAA;AAGtD,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAAC,+BAACC,uBAAAA,SAAO,GAAG,OAAO,MAAM,qBAAqB,SAAS,YAAY;AAAA,IAElED,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAY,qBAAqB,kBAAkB;AAAA,QAEnD,UAAAA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;"}

package/dist/components/Input/InputPassword.mjs

@@ -23,7 +23,7 @@ const InputPassword = (props) => {
         children: /* @__PURE__ */ jsx(
           EyeIconComponent,
           {
-            className: "text-neutral dark:text-neutral-dark mr-2 inline-block",
+            className: "text-neutral mr-2 inline-block",
             size: 20
           }
         )

package/dist/components/Input/InputPassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.mjs","sources":["../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, useState, type MouseEventHandler } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input {...props} type={isPasswordRevealed ? 'text' : 'password'} />\n\n      <button\n        data-testid=\"eye-icon\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"text-neutral dark:text-neutral-dark mr-2 inline-block\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"names":["isPasswordRevealed"],"mappings":";;;;;AAQa,MAAA,gBAAwC,CAAC,UAAU;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAE5D,QAAA,uBAA6D,CAAC,MAAM;AACxE,MAAE,eAAe;AACjB,MAAE,gBAAgB;AACI,0BAAA,CAACA,wBAAuB,CAACA,mBAAkB;AAAA,EACnE;AAEM,QAAA,mBAAmB,qBAAqB,UAAU;AAGtD,SAAA,qBAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAA,oBAAC,SAAO,GAAG,OAAO,MAAM,qBAAqB,SAAS,YAAY;AAAA,IAElE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAY,qBAAqB,kBAAkB;AAAA,QAEnD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"InputPassword.mjs","sources":["../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, useState, type MouseEventHandler } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input {...props} type={isPasswordRevealed ? 'text' : 'password'} />\n\n      <button\n        data-testid=\"eye-icon\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"text-neutral mr-2 inline-block\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"names":["isPasswordRevealed"],"mappings":";;;;;AAQa,MAAA,gBAAwC,CAAC,UAAU;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAE5D,QAAA,uBAA6D,CAAC,MAAM;AACxE,MAAE,eAAe;AACjB,MAAE,gBAAgB;AACI,0BAAA,CAACA,wBAAuB,CAACA,mBAAkB;AAAA,EACnE;AAEM,QAAA,mBAAmB,qBAAqB,UAAU;AAGtD,SAAA,qBAAC,OAAI,EAAA,WAAU,YACb,UAAA;AAAA,IAAA,oBAAC,SAAO,GAAG,OAAO,MAAM,qBAAqB,SAAS,YAAY;AAAA,IAElE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAY,qBAAqB,kBAAkB;AAAA,QAEnD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/KeyboardScreenAdapter/index.cjs

@@ -0,0 +1,25 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const hooks_useKeyboardDetector = require("../../hooks/useKeyboardDetector.cjs");
+const utils_cn = require("../../utils/cn.cjs");
+const KeyboardScreenAdapter = ({ children, className, ...props }) => {
+  const { windowHeight } = hooks_useKeyboardDetector.useKeyboardDetector();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        "h-screen w-screen overflow-scroll scroll-smooth transition",
+        className
+      ),
+      style: {
+        maxHeight: windowHeight ? `${windowHeight}px` : void 0
+      },
+      ...props,
+      children
+    }
+  );
+};
+exports.KeyboardScreenAdapter = KeyboardScreenAdapter;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-scroll scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["useKeyboardDetector","jsx","cn"],"mappings":";;;;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAIA,8CAAoB;AAG3C,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;;"}

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

@@ -0,0 +1,3 @@
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+export declare const KeyboardScreenAdapter: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAInE,eAAO,MAAM,qBAAqB,EAAE,EAAE,CACpC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAkBlD,CAAC"}

package/dist/components/KeyboardScreenAdapter/index.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useKeyboardDetector } from "../../hooks/useKeyboardDetector.mjs";
+import { cn } from "../../utils/cn.mjs";
+const KeyboardScreenAdapter = ({ children, className, ...props }) => {
+  const { windowHeight } = useKeyboardDetector();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "h-screen w-screen overflow-scroll scroll-smooth transition",
+        className
+      ),
+      style: {
+        maxHeight: windowHeight ? `${windowHeight}px` : void 0
+      },
+      ...props,
+      children
+    }
+  );
+};
+export {
+  KeyboardScreenAdapter
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-scroll scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAI,oBAAoB;AAG3C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}