doccupine 0.0.1-1

package/dist/templates/code.js

@@ -0,0 +1,192 @@
+export const codeTemplate = `"use client";
+"use client";
+import styled from "styled-components";
+import { Theme, styledCode } from "cherry-styled-components/src/lib";
+import { rgba } from "polished";
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeHighlight from "rehype-highlight";
+import rehypeStringify from "rehype-stringify";
+import { editableContent } from "@/app/components/layout/SharedStyled";
+
+interface CodeProps extends React.HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language?: string;
+  theme?: Theme;
+}
+
+const CodeWrapper = styled.span<{ theme: Theme }>\`
+  position: relative;
+  z-index: 2;
+  display: block;
+  width: 100%;
+  border-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border: solid 1px
+    \${({ theme }) =>
+      theme.isDark ? rgba(theme.colors.dark, 0.2) : rgba(theme.colors.dark, 0)};
+\`;
+
+const TopBar = styled.div<{ theme: Theme }>\`
+  background: #0d1117;
+  border-top-left-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border-top-right-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border-bottom: solid 1px \${rgba("#ffffff", 0.1)};
+  height: 33px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  gap: 5px;
+  padding: 10px;
+\`;
+
+const Dot = styled.span<{ theme: Theme }>\`
+  margin: auto 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: \${rgba("#ffffff", 0.1)};
+\`;
+
+const Body = styled.div<{ theme: Theme }>\`
+  background: #0d1117;
+  border-bottom-left-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border-bottom-right-radius: \${({ theme }) => theme.spacing.radius.lg};
+  color: #ffffff;
+  padding: 20px;
+  font-family: \${({ theme }) => theme.fonts.mono};
+  text-align: left;
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: calc(100svh - 400px);
+  \${({ theme }) => styledCode(theme)};
+
+  &[contenteditable="true"] {
+    \${editableContent};
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  & .hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+
+  & .hljs-doctag,
+  & .hljs-keyword,
+  & .hljs-meta .hljs-keyword,
+  & .hljs-template-tag,
+  & .hljs-template-variable,
+  & .hljs-type,
+  & .hljs-variable.language_ {
+    color: #ff7b72;
+  }
+
+  & .hljs-title,
+  & .hljs-title.class_,
+  & .hljs-title.class_.inherited__,
+  & .hljs-title.function_ {
+    color: #d2a8ff;
+  }
+
+  & .hljs-attr,
+  & .hljs-attribute,
+  & .hljs-literal,
+  & .hljs-meta,
+  & .hljs-number,
+  & .hljs-operator,
+  & .hljs-selector-attr,
+  & .hljs-selector-class,
+  & .hljs-selector-id,
+  & .hljs-variable {
+    color: #79c0ff;
+  }
+
+  & .hljs-meta .hljs-string,
+  & .hljs-regexp,
+  & .hljs-string {
+    color: #a5d6ff;
+  }
+
+  & .hljs-built_in,
+  & .hljs-symbol {
+    color: #ffa657;
+  }
+
+  & .hljs-code,
+  & .hljs-comment,
+  & .hljs-formula {
+    color: #8b949e;
+  }
+
+  & .hljs-name,
+  & .hljs-quote,
+  & .hljs-selector-pseudo,
+  & .hljs-selector-tag {
+    color: #7ee787;
+  }
+
+  & .hljs-subst {
+    color: #c9d1d9;
+  }
+
+  & .hljs-section {
+    color: #1f6feb;
+    font-weight: 700;
+  }
+
+  & .hljs-bullet {
+    color: #f2cc60;
+  }
+
+  & .hljs-emphasis {
+    color: #c9d1d9;
+    font-style: italic;
+  }
+
+  & .hljs-strong {
+    color: #c9d1d9;
+    font-weight: 700;
+  }
+
+  & .hljs-addition {
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+
+  & .hljs-deletion {
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
+\`;
+
+const highlightCode = (code: string, language: string): string => {
+  const result = unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeHighlight, {
+      detect: true,
+      ignoreMissing: true,
+    })
+    .use(rehypeStringify)
+    .processSync(
+      \`<pre><code class="language-\${language}">\${code}</code></pre>\`,
+    );
+
+  return String(result);
+};
+
+function Code({ code, language = "javascript", ...props }: CodeProps) {
+  const highlightedCode = highlightCode(code, language);
+  return (
+    <CodeWrapper>
+      <TopBar>
+        <Dot />
+        <Dot />
+        <Dot />
+      </TopBar>
+      <Body dangerouslySetInnerHTML={{ __html: highlightedCode }} {...props} />
+    </CodeWrapper>
+  );
+}
+
+export { Code };
+`;

package/dist/templates/components/ClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const clickOutsideTemplate = "import { RefObject, useEffect } from \"react\";\n\nexport function useOnClickOutside(\n  refs: RefObject<HTMLElement | null>[],\n  cb: () => void,\n) {\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        refs &&\n        refs\n          .map(\n            (ref) =>\n              ref && ref.current && ref.current.contains(event.target as Node),\n          )\n          .every((i) => i === false)\n      ) {\n        cb();\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [refs, cb]);\n}\n";

package/dist/templates/components/ClickOutside.js

@@ -0,0 +1,27 @@
+export const clickOutsideTemplate = `import { RefObject, useEffect } from "react";
+
+export function useOnClickOutside(
+  refs: RefObject<HTMLElement | null>[],
+  cb: () => void,
+) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        refs &&
+        refs
+          .map(
+            (ref) =>
+              ref && ref.current && ref.current.contains(event.target as Node),
+          )
+          .every((i) => i === false)
+      ) {
+        cb();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [refs, cb]);
+}
+`;

package/dist/templates/components/Docs.d.ts

@@ -0,0 +1 @@
+export declare const docsTemplate = "\"use client\";\nimport { Flex } from \"cherry-styled-components/src/lib\";\nimport Markdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { Code } from \"@/components/layout/Code\";\nimport { \n  DocsContainer,\n  StyledMarkdownContainer,\n} from \"@/components/layout/DocsComponents\";\n\ninterface DocsProps {\n  content: string;\n}\n  \nfunction Docs({ content }: DocsProps) {\n  return (\n    <DocsContainer>\n      <Flex $gap={20}>\n        <StyledMarkdownContainer>\n        {content && (\n          <Markdown\n            remarkPlugins={[remarkGfm]}\n            components={{\n              code(props) {\n                const { children, className, node, ...rest } = props;\n                const match = /language-(\\w+)/.exec(className || \"\");\n                return match ? (\n                <Code\n                    {...rest}\n                    className={className}\n                    code={String(children).replace(/\\n$/, \"\")}\n                    language={match[1]}\n                  />\n                ) : (\n                  <code {...rest} className={className}>\n                    {children}\n                  </code>\n                );\n              },\n            }}\n          >\n            {content}\n          </Markdown>\n         )}\n        </StyledMarkdownContainer>\n      </Flex>\n    </DocsContainer>\n  );\n}\n\nexport { Docs };\n";

package/dist/templates/components/Docs.js

@@ -0,0 +1,52 @@
+export const docsTemplate = `"use client";
+import { Flex } from "cherry-styled-components/src/lib";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Code } from "@/components/layout/Code";
+import { 
+  DocsContainer,
+  StyledMarkdownContainer,
+} from "@/components/layout/DocsComponents";
+
+interface DocsProps {
+  content: string;
+}
+  
+function Docs({ content }: DocsProps) {
+  return (
+    <DocsContainer>
+      <Flex $gap={20}>
+        <StyledMarkdownContainer>
+        {content && (
+          <Markdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              code(props) {
+                const { children, className, node, ...rest } = props;
+                const match = /language-(\\w+)/.exec(className || "");
+                return match ? (
+                <Code
+                    {...rest}
+                    className={className}
+                    code={String(children).replace(/\\n\$/, "")}
+                    language={match[1]}
+                  />
+                ) : (
+                  <code {...rest} className={className}>
+                    {children}
+                  </code>
+                );
+              },
+            }}
+          >
+            {content}
+          </Markdown>
+         )}
+        </StyledMarkdownContainer>
+      </Flex>
+    </DocsContainer>
+  );
+}
+
+export { Docs };
+`;

package/dist/templates/components/SideBar.d.ts

@@ -0,0 +1 @@
+export declare const sideBarTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Space } from \"cherry-styled-components/src/lib\";\nimport { \n  DocsSidebar,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyleMobileBar,\n  StyledMobileBurger\n} from \"@/components/layout/DocsComponents\";\n\ntype NavItem = {\n  label: string;\n  links: NavItemLink[];\n};\n\ntype NavItemLink = {\n  slug: string;\n  title: string;\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const pathname = usePathname();\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar $isActive={isMobileMenuOpen}>\n        {result && result.map((item: any, index: number) => {\n          return (\n            <StyledSidebarList key={index}>\n              <StyledSidebarListItem>\n                <StyledStrong>{item.label}</StyledStrong>{\" \"}\n              </StyledSidebarListItem>\n              <li>\n                <Space $size={20} />\n              </li>\n              {item.links &&\n                item.links.map((link: any, indexChild: number) => {\n                  return (\n                    <StyledSidebarListItem key={indexChild}>\n                      <StyledSidebarListItemLink\n                        href={`/${link.slug}`}\n                        $isActive={\n                          pathname ===\n                          `/${link.slug}`\n                        }\n                        onClick={() => setIsMobileMenuOpen(false)}\n                      >\n                        {link.title}\n                      </StyledSidebarListItemLink>\n                    </StyledSidebarListItem>\n                  );\n                })}\n              <Space $size={20} />\n            </StyledSidebarList>\n          );\n        })}\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";

package/dist/templates/components/SideBar.js

@@ -0,0 +1,80 @@
+export const sideBarTemplate = `"use client";
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import { Space } from "cherry-styled-components/src/lib";
+import { 
+  DocsSidebar,
+  StyledSidebar,
+  StyledSidebarList,
+  StyledSidebarListItem,
+  StyledStrong,
+  StyledSidebarListItemLink,
+  StyleMobileBar,
+  StyledMobileBurger
+} from "@/components/layout/DocsComponents";
+
+type NavItem = {
+  label: string;
+  links: NavItemLink[];
+};
+
+type NavItemLink = {
+  slug: string;
+  title: string;
+};
+
+interface SideBarProps {
+  result: NavItem[];
+}
+
+function SideBar({ result }: SideBarProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  return (
+    <DocsSidebar>
+      <StyleMobileBar
+        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+        $isActive={isMobileMenuOpen}
+      >
+        <StyledMobileBurger $isActive={isMobileMenuOpen} />
+      </StyleMobileBar>
+
+      <StyledSidebar $isActive={isMobileMenuOpen}>
+        {result && result.map((item: any, index: number) => {
+          return (
+            <StyledSidebarList key={index}>
+              <StyledSidebarListItem>
+                <StyledStrong>{item.label}</StyledStrong>{" "}
+              </StyledSidebarListItem>
+              <li>
+                <Space $size={20} />
+              </li>
+              {item.links &&
+                item.links.map((link: any, indexChild: number) => {
+                  return (
+                    <StyledSidebarListItem key={indexChild}>
+                      <StyledSidebarListItemLink
+                        href={\`/\${link.slug}\`}
+                        $isActive={
+                          pathname ===
+                          \`/\${link.slug}\`
+                        }
+                        onClick={() => setIsMobileMenuOpen(false)}
+                      >
+                        {link.title}
+                      </StyledSidebarListItemLink>
+                    </StyledSidebarListItem>
+                  );
+                })}
+              <Space $size={20} />
+            </StyledSidebarList>
+          );
+        })}
+      </StyledSidebar>
+    </DocsSidebar>
+  );
+}
+
+export { SideBar };
+`;

package/dist/templates/components/layout/Code.d.ts

@@ -0,0 +1 @@
+export declare const codeTemplate = "\"use client\";\n\"use client\";\nimport styled from \"styled-components\";\nimport { Theme, styledCode } from \"cherry-styled-components/src/lib\";\nimport { rgba } from \"polished\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { editableContent } from \"@/components/layout/SharedStyled\";\n\ninterface CodeProps extends React.HTMLAttributes<HTMLDivElement> {\n  code: string;\n  language?: string;\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px\n    ${({ theme }) =>\n      theme.isDark ? rgba(theme.colors.dark, 0.2) : rgba(theme.colors.dark, 0)};\n`;\n\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: #0d1117;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px ${rgba(\"#ffffff\", 0.1)};\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  gap: 5px;\n  padding: 10px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  margin: auto 0;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: ${rgba(\"#ffffff\", 0.1)};\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #0d1117;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #ffffff;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100svh - 400px);\n  ${({ theme }) => styledCode(theme)};\n\n  &[contenteditable=\"true\"] {\n    ${editableContent};\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst highlightCode = (code: string, language: string): string => {\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${language}\">${code}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({ code, language = \"javascript\", ...props }: CodeProps) {\n  const highlightedCode = highlightCode(code, language);\n  return (\n    <CodeWrapper>\n      <TopBar>\n        <Dot />\n        <Dot />\n        <Dot />\n      </TopBar>\n      <Body dangerouslySetInnerHTML={{ __html: highlightedCode }} {...props} />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";

package/dist/templates/components/layout/Code.js

@@ -0,0 +1,192 @@
+export const codeTemplate = `"use client";
+"use client";
+import styled from "styled-components";
+import { Theme, styledCode } from "cherry-styled-components/src/lib";
+import { rgba } from "polished";
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeHighlight from "rehype-highlight";
+import rehypeStringify from "rehype-stringify";
+import { editableContent } from "@/components/layout/SharedStyled";
+
+interface CodeProps extends React.HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language?: string;
+  theme?: Theme;
+}
+
+const CodeWrapper = styled.span<{ theme: Theme }>\`
+  position: relative;
+  z-index: 2;
+  display: block;
+  width: 100%;
+  border-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border: solid 1px
+    \${({ theme }) =>
+      theme.isDark ? rgba(theme.colors.dark, 0.2) : rgba(theme.colors.dark, 0)};
+\`;
+
+const TopBar = styled.div<{ theme: Theme }>\`
+  background: #0d1117;
+  border-top-left-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border-top-right-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border-bottom: solid 1px \${rgba("#ffffff", 0.1)};
+  height: 33px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  gap: 5px;
+  padding: 10px;
+\`;
+
+const Dot = styled.span<{ theme: Theme }>\`
+  margin: auto 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: \${rgba("#ffffff", 0.1)};
+\`;
+
+const Body = styled.div<{ theme: Theme }>\`
+  background: #0d1117;
+  border-bottom-left-radius: \${({ theme }) => theme.spacing.radius.lg};
+  border-bottom-right-radius: \${({ theme }) => theme.spacing.radius.lg};
+  color: #ffffff;
+  padding: 20px;
+  font-family: \${({ theme }) => theme.fonts.mono};
+  text-align: left;
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: calc(100svh - 400px);
+  \${({ theme }) => styledCode(theme)};
+
+  &[contenteditable="true"] {
+    \${editableContent};
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  & .hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+
+  & .hljs-doctag,
+  & .hljs-keyword,
+  & .hljs-meta .hljs-keyword,
+  & .hljs-template-tag,
+  & .hljs-template-variable,
+  & .hljs-type,
+  & .hljs-variable.language_ {
+    color: #ff7b72;
+  }
+
+  & .hljs-title,
+  & .hljs-title.class_,
+  & .hljs-title.class_.inherited__,
+  & .hljs-title.function_ {
+    color: #d2a8ff;
+  }
+
+  & .hljs-attr,
+  & .hljs-attribute,
+  & .hljs-literal,
+  & .hljs-meta,
+  & .hljs-number,
+  & .hljs-operator,
+  & .hljs-selector-attr,
+  & .hljs-selector-class,
+  & .hljs-selector-id,
+  & .hljs-variable {
+    color: #79c0ff;
+  }
+
+  & .hljs-meta .hljs-string,
+  & .hljs-regexp,
+  & .hljs-string {
+    color: #a5d6ff;
+  }
+
+  & .hljs-built_in,
+  & .hljs-symbol {
+    color: #ffa657;
+  }
+
+  & .hljs-code,
+  & .hljs-comment,
+  & .hljs-formula {
+    color: #8b949e;
+  }
+
+  & .hljs-name,
+  & .hljs-quote,
+  & .hljs-selector-pseudo,
+  & .hljs-selector-tag {
+    color: #7ee787;
+  }
+
+  & .hljs-subst {
+    color: #c9d1d9;
+  }
+
+  & .hljs-section {
+    color: #1f6feb;
+    font-weight: 700;
+  }
+
+  & .hljs-bullet {
+    color: #f2cc60;
+  }
+
+  & .hljs-emphasis {
+    color: #c9d1d9;
+    font-style: italic;
+  }
+
+  & .hljs-strong {
+    color: #c9d1d9;
+    font-weight: 700;
+  }
+
+  & .hljs-addition {
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+
+  & .hljs-deletion {
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
+\`;
+
+const highlightCode = (code: string, language: string): string => {
+  const result = unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeHighlight, {
+      detect: true,
+      ignoreMissing: true,
+    })
+    .use(rehypeStringify)
+    .processSync(
+      \`<pre><code class="language-\${language}">\${code}</code></pre>\`,
+    );
+
+  return String(result);
+};
+
+function Code({ code, language = "javascript", ...props }: CodeProps) {
+  const highlightedCode = highlightCode(code, language);
+  return (
+    <CodeWrapper>
+      <TopBar>
+        <Dot />
+        <Dot />
+        <Dot />
+      </TopBar>
+      <Body dangerouslySetInnerHTML={{ __html: highlightedCode }} {...props} />
+    </CodeWrapper>
+  );
+}
+
+export { Code };
+`;

package/dist/templates/components/layout/DocsComponents.d.ts

@@ -0,0 +1 @@
+export declare const docsComponentsTemplate = "\"use client\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  resetButton,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { interactiveStyles } from \"./SharedStyled\";\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.div<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  position: sticky;\n  top: 90px;\n  min-width: 200px;\n  float: left;\n  z-index: 999;\n\n  ${mq(\"lg\")} {\n    z-index: 2;\n  }\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 0;\n  width: 100%;\n\n  & pre {\n    max-width: 100%;\n  }\n\n  ${mq(\"lg\")} {\n    padding-left: 230px;\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      $mq: \"lg\" {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      padding: 0;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(100svh - 70px);\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  z-index: 99;\n  top: 70px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n\n  ${mq(\"lg\")} {\n    width: 220px;\n    left: 20px;\n    background: transparent;\n    padding: 20px 20px 20px 0;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n  }\n\n  ${mq(\"xl\")} {\n    width: 220px;\n    left: calc(50% - 610px);\n  }\n\n  ${mq(\"xxl\")} {\n    width: 220px;\n    left: calc(50% - 690px);\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.strong.xs};\n  line-height: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 20px;\n  display: flex;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      border-color: ${({ theme }) => theme.colors.info};\n    }\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.colors.dark};\n\t\t\tborder-color: ${theme.colors.info};\n\t\t\tfont-weight: 600;\n\t`};\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 1000;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) =>\n    theme.isDark\n      ? rgba(theme.colors.grayLight, 0.7)\n      : rgba(theme.colors.light, 0.7)};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.primary};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 30px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed; `};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) =>\n      theme.isDark ? theme.colors.dark : theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledInlineButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  ${interactiveStyles};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 0;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n      background: ${({ theme }) => theme.colors.primary};\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 12px;\n    height: 12px;\n    margin: auto;\n  }\n`;\n\nexport const StyledPlusButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  padding: 0;\n  width: 100%;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n  position: relative;\n  margin: 20px 0 0 0;\n\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 100%;\n    height: 1px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.grayLight};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 18px;\n    height: 18px;\n    border: solid 1px ${({ theme }) => theme.colors.grayLight};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    background: ${({ theme }) => theme.colors.light};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  @media (hover: hover) {\n    &:hover {\n      &::after {\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  &:focus {\n    &::after {\n      border-color: ${({ theme }) => theme.colors.primary};\n      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  &:active {\n    &::after {\n      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n\n      &::after {\n        background: ${({ theme }) => theme.colors.primary};\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 14px;\n    height: 14px;\n    margin: auto;\n  }\n`;\n\nexport const StyledFullHeightInput = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex: 1;\n\n  & > span {\n    height: 100%;\n    width: 100%;\n  }\n\n  & textarea {\n    height: 100%;\n  }\n`;\n\nexport const StyledEditorWrapper = styled.div`\n  flex: 1;\n\n  &:empty {\n    display: none;\n  }\n`;\n\nfunction DocsWrapper({ children }: DocsProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  return <StyledDocsContainer>{children}</StyledDocsContainer>;\n}\n\nexport { DocsWrapper, DocsSidebar, DocsContainer };\n";