doccupine 0.0.21 → 0.0.22

package/dist/index.js

@@ -749,7 +749,7 @@ export default function Home() {
 program
     .name("doccupine")
     .description("Watch MDX files and generate Next.js documentation pages automatically")
-    .version("0.0.21");
+    .version("0.0.22");
 program
     .command("watch", { isDefault: true })
     .description("Watch a directory for MDX changes and generate Next.js app")

package/dist/templates/app/layout.js

@@ -1,9 +1,6 @@
 export const layoutTemplate = (pages) => `import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { 
-  Container,
-  StyledComponentsRegistry,
-} from "cherry-styled-components/src/lib";
+import { StyledComponentsRegistry } from "cherry-styled-components/src/lib";
 import { theme, themeDark } from "@/app/theme";
 import { CherryThemeProvider } from "@/components/layout/CherryThemeProvider";
 import { Footer } from "@/components/layout/Footer";
@@ -54,15 +51,13 @@ export default async function RootLayout({
         <StyledComponentsRegistry>
           <CherryThemeProvider theme={theme} themeDark={themeDark}>
             <Header />
-            <Container $padding={20}>
-              <DocsWrapper>
-                <SideBar result={result.length ? result : defaultResults} />
-                {children}
-                <DocsNavigation
-                  result={result.length ? result : defaultResults}
-                />
-              </DocsWrapper>
-            </Container>
+            <DocsWrapper>
+              <SideBar result={result.length ? result : defaultResults} />
+              {children}
+              <DocsNavigation
+                result={result.length ? result : defaultResults}
+              />
+            </DocsWrapper>
             <Footer />
           </CherryThemeProvider>
         </StyledComponentsRegistry>

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

@@ -1 +1 @@
-export declare const actionBarTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components/src/lib\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{ theme: Theme }>`\n  position: absolute;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 70px 0 20px 0;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: calc(100vw - 640px);\n    width: 100%;\n    padding: 0 20px 20px 20px;\n    margin: 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: transparent;\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:hover {\n    border-color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      transform: scale(1.05);\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      Toggle & svg[stroke] {\n        stroke: ${({ theme }) =>\n          theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      }\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div`\n  padding-top: 140px;\n\n  ${mq(\"lg\")} {\n    padding-top: 70px;\n  }\n\n  & textarea {\n    width: 100%;\n    height: 100%;\n    min-height: calc(100vh - 180px);\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 110px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy Content</span>\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          {\" \"}\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle Theme\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && <StyledContent>{children}</StyledContent>}\n      {!isView && (\n        <StyledContent>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };";
+export declare const actionBarTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { rgba } from \"polished\";\nimport { resetButton, Textarea } from \"cherry-styled-components/src/lib\";\n\ninterface ActionBarProps {\n  children: React.ReactNode;\n  content: string;\n}\n\nconst StyledActionBar = styled.div<{ theme: Theme }>`\n  position: absolute;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  left: 0;\n  padding: 70px 20px 20px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n\n  ${mq(\"lg\")} {\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: calc(100vw - 640px);\n    width: 100%;\n    padding: 0 20px 20px 20px;\n    margin: 0;\n  }\n`;\n\nconst StyledActionBarContent = styled.div`\n  margin: auto 0;\n`;\n\nconst StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: transparent;\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:hover {\n    border-color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nconst StyledToggle = styled.button<{ theme: Theme; $isActive?: boolean }>`\n  ${resetButton}\n  width: 56px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    transition: all 0.3s ease;\n    z-index: 1;\n    ${({ $isActive }) =>\n      !$isActive &&\n      css`\n        transform: translateX(24px);\n      `}\n  }\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-eye {\n    transform: translateX(1px);\n  }\n\n  & .lucide-code-xml {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      transform: scale(1.05);\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      Toggle & svg[stroke] {\n        stroke: ${({ theme }) =>\n          theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      }\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nconst StyledContent = styled.div`\n  padding-top: 140px;\n\n  ${mq(\"lg\")} {\n    padding-top: 70px;\n  }\n\n  & textarea {\n    max-width: 640px;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    min-height: calc(100vh - 180px);\n\n    ${mq(\"lg\")} {\n      min-height: calc(100vh - 110px);\n    }\n  }\n`;\n\nfunction ActionBar({ children, content }: ActionBarProps) {\n  const [isView, setIsView] = useState(true);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <>\n      <StyledActionBar>\n        <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n          {copied ? (\n            <>\n              <Icon name=\"check\" size={12} />\n              <span>Copied!</span>\n            </>\n          ) : (\n            <>\n              <Icon name=\"copy\" size={12} />\n              <span>Copy Content</span>\n            </>\n          )}\n        </StyledCopyButton>\n        <StyledActionBarContent>\n          {\" \"}\n          <StyledToggle\n            onClick={() => setIsView(!isView)}\n            aria-label=\"Toggle Theme\"\n            $isActive={isView}\n          >\n            <Icon name=\"Eye\" />\n            <Icon name=\"CodeXml\" />\n          </StyledToggle>\n        </StyledActionBarContent>\n      </StyledActionBar>\n      {isView && <StyledContent>{children}</StyledContent>}\n      {!isView && (\n        <StyledContent>\n          <Textarea defaultValue={content} $fullWidth />\n        </StyledContent>\n      )}\n    </>\n  );\n}\n\nexport { ActionBar };";

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

@@ -15,7 +15,7 @@ const StyledActionBar = styled.div<{ theme: Theme }>\`
   position: absolute;
   border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
   left: 0;
-  padding: 70px 0 20px 0;
+  padding: 70px 20px 20px 20px;
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -144,6 +144,8 @@ const StyledContent = styled.div\`
   }
 
   & textarea {
+    max-width: 640px;
+    margin: auto;
     width: 100%;
     height: 100%;
     min-height: calc(100vh - 180px);

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

@@ -1 +1 @@
-export declare const docsComponentsTemplate = "\"use client\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport Link from \"next/link\";\nimport { darken, lighten, 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  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 0 0 100px 0;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 0 320px 80px 320px;\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n  }\n\n  & pre {\n    max-width: 100%;\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      & .code-wrapper {\n        margin: 10px 0;\n      }\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      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      & .code-wrapper {\n        margin: 10px 0;\n      }\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  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\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  max-width: 640px;\n  margin: auto;\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  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  background: ${({ theme }) => theme.colors.light};\n\n  ${mq(\"lg\")} {\n    max-height: 100svh;\n    width: 220px;\n    background: transparent;\n    padding: 90px 40px 40px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    top: 0;\n    width: 320px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100vh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 40px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\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  color: ${({ theme }) =>\n    theme.isDark\n      ? lighten(0.1, theme.colors.primaryLight)\n      : darken(0.1, theme.colors.primaryDark)};\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.small.lg};\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  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.isDark ? lighten(0.1, theme.colors.primaryLight) : darken(0.1, theme.colors.primaryDark)};\n\t\t\tborder-color: ${theme.colors.primary};\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";
+export declare const docsComponentsTemplate = "\"use client\";\nimport { darken, lighten, rgba } from \"polished\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  resetButton,\n  styledSmall,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\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  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 20px 20px 100px 20px;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 340px 80px 340px;\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n  }\n\n  & pre {\n    max-width: 100%;\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      & .code-wrapper {\n        margin: 10px 0;\n      }\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      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      & .code-wrapper {\n        margin: 10px 0;\n      }\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  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\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  max-width: 640px;\n  margin: auto;\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  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  background: ${({ theme }) => theme.colors.light};\n\n  ${mq(\"lg\")} {\n    max-height: 100svh;\n    width: 220px;\n    background: transparent;\n    padding: 90px 40px 40px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    top: 0;\n    width: 320px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100vh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 40px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\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  color: ${({ theme }) =>\n    theme.isDark\n      ? lighten(0.1, theme.colors.primaryLight)\n      : darken(0.1, theme.colors.primaryDark)};\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.small.lg};\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  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.isDark ? lighten(0.1, theme.colors.primaryLight) : darken(0.1, theme.colors.primaryDark)};\n\t\t\tborder-color: ${theme.colors.primary};\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: 20px;\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\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 };";

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

@@ -1,5 +1,7 @@
 export const docsComponentsTemplate = `"use client";
-import { mq, Theme } from "@/app/theme";
+import { darken, lighten, rgba } from "polished";
+import React from "react";
+import styled, { css } from "styled-components";
 import {
   resetButton,
   styledSmall,
@@ -7,10 +9,7 @@ import {
   styledText,
 } from "cherry-styled-components/src/lib";
 import Link from "next/link";
-import { darken, lighten, rgba } from "polished";
-import React from "react";
-import styled, { css } from "styled-components";
-import { interactiveStyles } from "./SharedStyled";
+import { mq, Theme } from "@/app/theme";
 
 interface DocsProps {
   children: React.ReactNode;
@@ -26,12 +25,12 @@ const StyledDocsSidebar = styled.div<{ theme: Theme }>\`
 
 const StyledDocsContainer = styled.div<{ theme: Theme }>\`
   position: relative;
-  padding: 0 0 100px 0;
+  padding: 20px 20px 100px 20px;
   width: 100%;
   \${({ theme }) => styledText(theme)};
 
   \${mq("lg")} {
-    padding: 0 320px 80px 320px;
+    padding: 20px 340px 80px 340px;
   }
 
   & p {
@@ -325,7 +324,7 @@ export const StyleMobileBar = styled.button<Props>\`
     theme.isDark ? theme.colors.dark : theme.colors.primary};
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  padding: 30px;
+  padding: 20px;
   border-radius: 100px;
   margin: 0 0 20px 0;
   font-weight: 600;
@@ -337,7 +336,7 @@ export const StyleMobileBar = styled.button<Props>\`
     display: none;
   }
 
-  \${({ $isActive }) => $isActive && \`position: fixed; \`};
+  \${({ $isActive }) => $isActive && \`position: fixed;\`};
 \`;
 
 export const StyledMobileBurger = styled.span<Props>\`
@@ -384,147 +383,6 @@ export const StyledMobileBurger = styled.span<Props>\`
     \`};
 \`;
 
-export const StyledInlineButton = styled.button<{ theme: Theme }>\`
-  \${resetButton};
-  \${interactiveStyles};
-  color: \${({ theme }) => theme.colors.primary};
-  vertical-align: middle;
-  border: solid 1px \${({ theme }) => theme.colors.grayLight};
-  border-radius: \${({ theme }) => theme.spacing.radius.xs};
-  padding: 0;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  margin: auto 0;
-  transition: all 0.3s ease;
-
-  @media (hover: hover) {
-    &:hover {
-      color: \${({ theme }) => theme.colors.light};
-      background: \${({ theme }) => theme.colors.primary};
-      border-color: \${({ theme }) => theme.colors.primary};
-    }
-  }
-
-  & svg {
-    vertical-align: middle;
-    width: 12px;
-    height: 12px;
-    margin: auto;
-  }
-\`;
-
-export const StyledPlusButton = styled.button<{ theme: Theme }>\`
-  \${resetButton};
-  color: \${({ theme }) => theme.colors.primary};
-  vertical-align: middle;
-  padding: 0;
-  width: 100%;
-  height: 18px;
-  display: flex;
-  margin: auto 0;
-  transition: all 0.3s ease;
-  position: relative;
-  margin: 20px 0 0 0;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 100%;
-    height: 1px;
-    border-radius: 3px;
-    background: \${({ theme }) => theme.colors.grayLight};
-    transition: all 0.3s ease;
-    z-index: -1;
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 18px;
-    height: 18px;
-    border: solid 1px \${({ theme }) => theme.colors.grayLight};
-    border-radius: \${({ theme }) => theme.spacing.radius.xs};
-    background: \${({ theme }) => theme.colors.light};
-    transition: all 0.3s ease;
-    z-index: -1;
-  }
-
-  box-shadow: 0 0 0 0px \${({ theme }) => theme.colors.primary};
-
-  @media (hover: hover) {
-    &:hover {
-      &::after {
-        border-color: \${({ theme }) => theme.colors.primary};
-      }
-    }
-  }
-
-  &:focus {
-    &::after {
-      border-color: \${({ theme }) => theme.colors.primary};
-      box-shadow: 0 0 0 4px \${({ theme }) => theme.colors.primaryLight};
-    }
-  }
-
-  &:active {
-    &::after {
-      box-shadow: 0 0 0 2px \${({ theme }) => theme.colors.primaryLight};
-    }
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      color: \${({ theme }) => theme.colors.light};
-
-      &::after {
-        background: \${({ theme }) => theme.colors.primary};
-        border-color: \${({ theme }) => theme.colors.primary};
-      }
-    }
-  }
-
-  & svg {
-    vertical-align: middle;
-    width: 14px;
-    height: 14px;
-    margin: auto;
-  }
-\`;
-
-export const StyledFullHeightInput = styled.div\`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  flex: 1;
-
-  & > span {
-    height: 100%;
-    width: 100%;
-  }
-
-  & textarea {
-    height: 100%;
-  }
-\`;
-
-export const StyledEditorWrapper = styled.div\`
-  flex: 1;
-
-  &:empty {
-    display: none;
-  }
-\`;
-
 function DocsWrapper({ children }: DocsProps) {
   return <StyledDocsWrapper>{children}</StyledDocsWrapper>;
 }
@@ -537,5 +395,4 @@ function DocsContainer({ children }: DocsProps) {
   return <StyledDocsContainer>{children}</StyledDocsContainer>;
 }
 
-export { DocsWrapper, DocsSidebar, DocsContainer };
-`;
+export { DocsWrapper, DocsSidebar, DocsContainer };`;

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

@@ -1 +1 @@
-export declare const docsNavigationTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst NavigationWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n  padding: 0 0 100px 0;\n\n  ${mq(\"lg\")} {\n    padding: 0 320px 80px 320px;\n  }\n`;\n\nconst NavButton = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  padding: 20px;\n  flex: 50%;\n  max-width: 50%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.dark};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &[data-direction=\"prev\"] {\n    align-items: flex-start;\n  }\n\n  &[data-direction=\"next\"] {\n    align-items: flex-end;\n    margin-left: auto;\n    text-align: right;\n  }\n`;\n\nconst NavLabel = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.gray};\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n\n  & svg {\n    margin: auto 0;\n  }\n`;\n\nconst NavTitle = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  margin: 0 0 4px 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nconst Spacer = styled.div`\n  flex: 1;\n`;\n\ninterface Page {\n  slug: string;\n  title: string;\n  category?: string;\n  [key: string]: any;\n}\n\ninterface NavigationItem {\n  category?: string;\n  slug?: string;\n  title?: string;\n  links?: Page[];\n  items?: Page[];\n  [key: string]: any;\n}\n\ninterface DocsNavigationProps {\n  result: NavigationItem[];\n}\n\nfunction DocsNavigation({ result }: DocsNavigationProps) {\n  const pathname = usePathname();\n\n  const allPages: Page[] = result.flatMap((item) => {\n    if (item.links && Array.isArray(item.links)) {\n      return item.links;\n    }\n    if (item.items && Array.isArray(item.items)) {\n      return item.items;\n    }\n    if (item.slug !== undefined) {\n      return [item as Page];\n    }\n    return [];\n  });\n\n  const currentSlug = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const currentIndex = allPages.findIndex((page) => page.slug === currentSlug);\n\n  const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;\n  const nextPage =\n    currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null;\n\n  if (currentIndex === -1 || allPages.length === 0) {\n    return null;\n  }\n\n  if (!prevPage && !nextPage) {\n    return null;\n  }\n\n  return (\n    <NavigationWrapper>\n      {prevPage ? (\n        <NavButton href={`/${prevPage.slug}`} data-direction=\"prev\">\n          <NavTitle>{prevPage.title}</NavTitle>\n          <NavLabel>\n            <Icon name=\"arrow-left\" size={16} /> Previous\n          </NavLabel>\n        </NavButton>\n      ) : (\n        <Spacer />\n      )}\n\n      {nextPage && (\n        <NavButton href={`/${nextPage.slug}`} data-direction=\"next\">\n          <NavTitle>{nextPage.title}</NavTitle>\n          <NavLabel>\n            Next <Icon name=\"arrow-right\" size={16} />\n          </NavLabel>\n        </NavButton>\n      )}\n    </NavigationWrapper>\n  );\n}\n\nexport { DocsNavigation };";
+export declare const docsNavigationTemplate = "\"use client\";\nimport { usePathname } from \"next/navigation\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst StyledNavigationWrapper = styled.div`\n  padding: 0 20px 100px 20px;\n\n  ${mq(\"lg\")} {\n    padding: 0 340px 80px 340px;\n  }\n`;\n\nconst StyledNavigationInner = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n  max-width: 640px;\n  margin: auto;\n`;\n\nconst StyledNavButton = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  display: flex;\n  flex-direction: column;\n  text-decoration: none;\n  padding: 20px;\n  flex: 50%;\n  max-width: 50%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.dark};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &[data-direction=\"prev\"] {\n    align-items: flex-start;\n  }\n\n  &[data-direction=\"next\"] {\n    align-items: flex-end;\n    margin-left: auto;\n    text-align: right;\n  }\n`;\n\nconst StyledNavLabel = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.gray};\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n\n  & svg {\n    margin: auto 0;\n  }\n`;\n\nconst StyledNavTitle = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.dark};\n  font-weight: 600;\n  margin: 0 0 4px 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nconst StyledSpacer = styled.div`\n  flex: 1;\n`;\n\ninterface Page {\n  slug: string;\n  title: string;\n  category?: string;\n  [key: string]: any;\n}\n\ninterface NavigationItem {\n  category?: string;\n  slug?: string;\n  title?: string;\n  links?: Page[];\n  items?: Page[];\n  [key: string]: any;\n}\n\ninterface DocsNavigationProps {\n  result: NavigationItem[];\n}\n\nfunction DocsNavigation({ result }: DocsNavigationProps) {\n  const pathname = usePathname();\n\n  const allPages: Page[] = result.flatMap((item) => {\n    if (item.links && Array.isArray(item.links)) {\n      return item.links;\n    }\n    if (item.items && Array.isArray(item.items)) {\n      return item.items;\n    }\n    if (item.slug !== undefined) {\n      return [item as Page];\n    }\n    return [];\n  });\n\n  const currentSlug = pathname.replace(/^\\//, \"\").replace(/\\/$/, \"\");\n\n  const currentIndex = allPages.findIndex((page) => page.slug === currentSlug);\n\n  const prevPage = currentIndex > 0 ? allPages[currentIndex - 1] : null;\n  const nextPage =\n    currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null;\n\n  if (currentIndex === -1 || allPages.length === 0) {\n    return null;\n  }\n\n  if (!prevPage && !nextPage) {\n    return null;\n  }\n\n  return (\n    <StyledNavigationWrapper>\n      <StyledNavigationInner>\n        {prevPage ? (\n          <StyledNavButton href={`/${prevPage.slug}`} data-direction=\"prev\">\n            <StyledNavTitle>{prevPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              <Icon name=\"arrow-left\" size={16} /> Previous\n            </StyledNavLabel>\n          </StyledNavButton>\n        ) : (\n          <StyledSpacer />\n        )}\n\n        {nextPage && (\n          <StyledNavButton href={`/${nextPage.slug}`} data-direction=\"next\">\n            <StyledNavTitle>{nextPage.title}</StyledNavTitle>\n            <StyledNavLabel>\n              Next <Icon name=\"arrow-right\" size={16} />\n            </StyledNavLabel>\n          </StyledNavButton>\n        )}\n      </StyledNavigationInner>\n    </StyledNavigationWrapper>\n  );\n}\n\nexport { DocsNavigation };";

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

@@ -6,19 +6,24 @@ import { Icon } from "@/components/layout/Icon";
 import { mq, Theme } from "@/app/theme";
 import { interactiveStyles } from "@/components/layout/SharedStyled";
 
-const NavigationWrapper = styled.div\`
+const StyledNavigationWrapper = styled.div\`
+  padding: 0 20px 100px 20px;
+
+  \${mq("lg")} {
+    padding: 0 340px 80px 340px;
+  }
+\`;
+
+const StyledNavigationInner = styled.div\`
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
-  padding: 0 0 100px 0;
-
-  \${mq("lg")} {
-    padding: 0 320px 80px 320px;
-  }
+  max-width: 640px;
+  margin: auto;
 \`;
 
-const NavButton = styled(Link)<{ theme: Theme }>\`
+const StyledNavButton = styled(Link)<{ theme: Theme }>\`
   \${interactiveStyles};
   display: flex;
   flex-direction: column;
@@ -45,7 +50,7 @@ const NavButton = styled(Link)<{ theme: Theme }>\`
   }
 \`;
 
-const NavLabel = styled.span<{ theme: Theme }>\`
+const StyledNavLabel = styled.span<{ theme: Theme }>\`
   color: \${({ theme }) => theme.colors.gray};
   display: flex;
   flex-direction: row;
@@ -56,7 +61,7 @@ const NavLabel = styled.span<{ theme: Theme }>\`
   }
 \`;
 
-const NavTitle = styled.span<{ theme: Theme }>\`
+const StyledNavTitle = styled.span<{ theme: Theme }>\`
   color: \${({ theme }) => theme.colors.dark};
   font-weight: 600;
   margin: 0 0 4px 0;
@@ -65,7 +70,7 @@ const NavTitle = styled.span<{ theme: Theme }>\`
   overflow: hidden;
 \`;
 
-const Spacer = styled.div\`
+const StyledSpacer = styled.div\`
   flex: 1;
 \`;
 
@@ -122,27 +127,29 @@ function DocsNavigation({ result }: DocsNavigationProps) {
   }
 
   return (
-    <NavigationWrapper>
-      {prevPage ? (
-        <NavButton href={\`/\${prevPage.slug}\`} data-direction="prev">
-          <NavTitle>{prevPage.title}</NavTitle>
-          <NavLabel>
-            <Icon name="arrow-left" size={16} /> Previous
-          </NavLabel>
-        </NavButton>
-      ) : (
-        <Spacer />
-      )}
-
-      {nextPage && (
-        <NavButton href={\`/\${nextPage.slug}\`} data-direction="next">
-          <NavTitle>{nextPage.title}</NavTitle>
-          <NavLabel>
-            Next <Icon name="arrow-right" size={16} />
-          </NavLabel>
-        </NavButton>
-      )}
-    </NavigationWrapper>
+    <StyledNavigationWrapper>
+      <StyledNavigationInner>
+        {prevPage ? (
+          <StyledNavButton href={\`/\${prevPage.slug}\`} data-direction="prev">
+            <StyledNavTitle>{prevPage.title}</StyledNavTitle>
+            <StyledNavLabel>
+              <Icon name="arrow-left" size={16} /> Previous
+            </StyledNavLabel>
+          </StyledNavButton>
+        ) : (
+          <StyledSpacer />
+        )}
+
+        {nextPage && (
+          <StyledNavButton href={\`/\${nextPage.slug}\`} data-direction="next">
+            <StyledNavTitle>{nextPage.title}</StyledNavTitle>
+            <StyledNavLabel>
+              Next <Icon name="arrow-right" size={16} />
+            </StyledNavLabel>
+          </StyledNavButton>
+        )}
+      </StyledNavigationInner>
+    </StyledNavigationWrapper>
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Generate beautiful, ready-to-use documentation with just one CLI command – fast, simple, and open source.",
   "main": "dist/index.js",
   "bin": {