doccupine 0.0.1

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

@@ -0,0 +1 @@
+export declare const themeToggleTemplate = "\"use client\";\nimport React, { useContext, useEffect, useState } from \"react\";\nimport { Theme, resetButton, ThemeContext } from \"cherry-styled-components/src/lib\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { useSearchParams } from \"next/navigation\";\nimport { theme as themeLight, themeDark } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>`\n  ${resetButton}\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n\n  ${({ $hidden }) =>\n    $hidden &&\n    css`\n      display: none;\n    `}\n\n  & svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) translateY(0);\n    margin: auto;\n    transition: all 0.3s ease;\n\n    &.lucide-sun {\n      ${({ theme }) =>\n        theme.isDark &&\n        `opacity: 0;\n\t\t\ttransform: translate(-50%, -50%) translateY(10px);`}\n    }\n\n    &.lucide-moon-star {\n      ${({ theme }) =>\n        !theme.isDark &&\n        `opacity: 0;\n\t\t\ttransform: translate(-50%, -50%) translateY(10px);`}\n    }\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\nfunction ToggleTheme({ $hidden }: { $hidden?: boolean }) {\n  const theme = useTheme() as Theme;\n  const { setTheme } = useContext(ThemeContext);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const searchParams = useSearchParams();\n  const themeParam = searchParams.get(\"theme\");\n\n  useEffect(() => {\n    setIsMounted(true);\n    if (themeParam === \"light\") {\n      setTheme(themeLight);\n      localStorage.theme = \"light\";\n    } else if (themeParam === \"dark\") {\n      setTheme(themeDark);\n      localStorage.theme = \"dark\";\n    }\n  }, [themeParam, setTheme]);\n\n  if (!isMounted) return null;\n\n  return (\n    <StyledThemeToggle\n      onClick={() => {\n        if (theme.isDark) {\n          setTheme(themeLight);\n          localStorage.theme = \"light\";\n        } else {\n          setTheme(themeDark);\n          localStorage.theme = \"dark\";\n        }\n      }}\n      $hidden={$hidden}\n      aria-label=\"Toggle Theme\"\n    >\n      <Icon name=\"MoonStar\" className=\"dark\" />\n      <Icon name=\"Sun\" className=\"light\" />\n    </StyledThemeToggle>\n  );\n}\n\nfunction ToggleThemeLoading() {\n  return (\n    <StyledThemeToggle $hidden aria-label=\"Toggle Theme\">\n      <Icon name=\"MoonStar\" className=\"dark\" />\n      <Icon name=\"Sun\" className=\"light\" />\n    </StyledThemeToggle>\n  );\n}\n\nexport { ToggleTheme, ToggleThemeLoading };\n";

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

@@ -0,0 +1,123 @@
+export const themeToggleTemplate = `"use client";
+import React, { useContext, useEffect, useState } from "react";
+import { Theme, resetButton, ThemeContext } from "cherry-styled-components/src/lib";
+import styled, { css, useTheme } from "styled-components";
+import { useSearchParams } from "next/navigation";
+import { theme as themeLight, themeDark } from "@/app/theme";
+import { Icon } from "@/components/layout/Icon";
+
+const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>\`
+  \${resetButton}
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  position: relative;
+  margin: auto 0;
+  transform: scale(1);
+
+  \${({ $hidden }) =>
+    $hidden &&
+    css\`
+      display: none;
+    \`}
+
+  & svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) translateY(0);
+    margin: auto;
+    transition: all 0.3s ease;
+
+    &.lucide-sun {
+      \${({ theme }) =>
+        theme.isDark &&
+        \`opacity: 0;
+			transform: translate(-50%, -50%) translateY(10px);\`}
+    }
+
+    &.lucide-moon-star {
+      \${({ theme }) =>
+        !theme.isDark &&
+        \`opacity: 0;
+			transform: translate(-50%, -50%) translateY(10px);\`}
+    }
+  }
+
+  & svg[stroke] {
+    stroke: \${({ theme }) => theme.colors.primary};
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      transform: scale(1.05);
+      color: \${({ theme }) =>
+        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+      Toggle & svg[stroke] {
+        stroke: \${({ theme }) =>
+          theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};
+      }
+    }
+  }
+
+  &:active {
+    transform: scale(0.97);
+  }
+\`;
+
+function ToggleTheme({ $hidden }: { $hidden?: boolean }) {
+  const theme = useTheme() as Theme;
+  const { setTheme } = useContext(ThemeContext);
+  const [isMounted, setIsMounted] = useState(false);
+
+  const searchParams = useSearchParams();
+  const themeParam = searchParams.get("theme");
+
+  useEffect(() => {
+    setIsMounted(true);
+    if (themeParam === "light") {
+      setTheme(themeLight);
+      localStorage.theme = "light";
+    } else if (themeParam === "dark") {
+      setTheme(themeDark);
+      localStorage.theme = "dark";
+    }
+  }, [themeParam, setTheme]);
+
+  if (!isMounted) return null;
+
+  return (
+    <StyledThemeToggle
+      onClick={() => {
+        if (theme.isDark) {
+          setTheme(themeLight);
+          localStorage.theme = "light";
+        } else {
+          setTheme(themeDark);
+          localStorage.theme = "dark";
+        }
+      }}
+      $hidden={$hidden}
+      aria-label="Toggle Theme"
+    >
+      <Icon name="MoonStar" className="dark" />
+      <Icon name="Sun" className="light" />
+    </StyledThemeToggle>
+  );
+}
+
+function ToggleThemeLoading() {
+  return (
+    <StyledThemeToggle $hidden aria-label="Toggle Theme">
+      <Icon name="MoonStar" className="dark" />
+      <Icon name="Sun" className="light" />
+    </StyledThemeToggle>
+  );
+}
+
+export { ToggleTheme, ToggleThemeLoading };
+`;

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

@@ -0,0 +1 @@
+export declare const typographyTemplate = "\"use client\";\nimport {\n  styledH1,\n  styledH2,\n  styledH3,\n  styledH4,\n  styledH5,\n  styledH6,\n  styledText,\n  Theme,\n} from \"cherry-styled-components/src/lib\";\nimport styled, { css } from \"styled-components\";\n\nconst StyledHeading = css`\n  font-weight: 900;\n`; \n\nexport const StyledH1 = styled.h1<{ theme: Theme }>` \n  ${StyledHeading};\n  ${({ theme }) => styledH1(theme)}\n`; \n\nexport const StyledH2 = styled.h2<{ theme: Theme }>` \n  ${StyledHeading};\n  ${({ theme }) => styledH2(theme)}\n`; \n\nexport const StyledH3 = styled.h3<{ theme: Theme }>` \n  ${StyledHeading};\n  ${({ theme }) => styledH3(theme)}\n`; \n\nexport const StyledH4 = styled.h4<{ theme: Theme }>` \n  ${StyledHeading};\n  ${({ theme }) => styledH4(theme)}\n`; \n\nexport const StyledH5 = styled.h5<{ theme: Theme }>` \n  ${StyledHeading};\n  ${({ theme }) => styledH5(theme)}\n`; \n\nexport const StyledH6 = styled.h6<{ theme: Theme }>` \n  ${StyledHeading};\n  ${({ theme }) => styledH6(theme)}\n`; \n\nexport const StyledText = styled.p<{ theme: Theme }>` \n  ${({ theme }) => styledText(theme)}\n`; \n";

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

@@ -0,0 +1,51 @@
+export const typographyTemplate = `"use client";
+import {
+  styledH1,
+  styledH2,
+  styledH3,
+  styledH4,
+  styledH5,
+  styledH6,
+  styledText,
+  Theme,
+} from "cherry-styled-components/src/lib";
+import styled, { css } from "styled-components";
+
+const StyledHeading = css\`
+  font-weight: 900;
+\`; 
+
+export const StyledH1 = styled.h1<{ theme: Theme }>\` 
+  \${StyledHeading};
+  \${({ theme }) => styledH1(theme)}
+\`; 
+
+export const StyledH2 = styled.h2<{ theme: Theme }>\` 
+  \${StyledHeading};
+  \${({ theme }) => styledH2(theme)}
+\`; 
+
+export const StyledH3 = styled.h3<{ theme: Theme }>\` 
+  \${StyledHeading};
+  \${({ theme }) => styledH3(theme)}
+\`; 
+
+export const StyledH4 = styled.h4<{ theme: Theme }>\` 
+  \${StyledHeading};
+  \${({ theme }) => styledH4(theme)}
+\`; 
+
+export const StyledH5 = styled.h5<{ theme: Theme }>\` 
+  \${StyledHeading};
+  \${({ theme }) => styledH5(theme)}
+\`; 
+
+export const StyledH6 = styled.h6<{ theme: Theme }>\` 
+  \${StyledHeading};
+  \${({ theme }) => styledH6(theme)}
+\`; 
+
+export const StyledText = styled.p<{ theme: Theme }>\` 
+  \${({ theme }) => styledText(theme)}
+\`; 
+`;

package/dist/templates/docs-components.d.ts

@@ -0,0 +1 @@
+export declare const docsComponentsTemplate = "\n\"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  ${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 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\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: 2.1;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 0 0 0 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    line-height: 2.1;\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";

package/dist/templates/docs-components.js

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

package/dist/templates/docs.d.ts

@@ -0,0 +1 @@
+export declare const docsTemplate = "\n\"use client\";\nimport { useState } from \"react\";\nimport Link from 'next/link';\nimport { usePathname } from \"next/navigation\";\nimport { Container, Flex, Space } from \"cherry-styled-components/src/lib\";\nimport Markdown from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { Code } from \"@/app/components/layout/Code\";\nimport { \n  DocsWrapper,\n  DocsSidebar,\n  DocsContainer,\n  StyledMarkdownContainer,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyleMobileBar,\n  StyledMobileBurger\n} from \"@/app/components/layout/DocsComponents\";\n  \nfunction Docs({content, result}) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const pathname = usePathname();\n  console.log(result, \"-\".repeat(100));\n  return (\n    <Container $padding={20}>\n      <DocsWrapper>\n        <DocsSidebar>\n          <StyleMobileBar\n            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n            $isActive={isMobileMenuOpen}\n          >\n            <StyledMobileBurger $isActive={isMobileMenuOpen} />\n          </StyleMobileBar>\n\n          <StyledSidebar $isActive={isMobileMenuOpen}>\n            <StyledSidebarList>\n              {result && result.map((item: any, index: number) => {\n                return (\n                  <div key={index}>\n                    <StyledSidebarListItem>\n                      <StyledStrong>{item.label}</StyledStrong>{\" \"}\n                    </StyledSidebarListItem>\n                    <Space $size={20} />\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                  </div>\n                );\n              })}\n            </StyledSidebarList>\n          </StyledSidebar>\n        </DocsSidebar>\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                      />\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      </DocsWrapper>\n    </Container>\n  );\n}\n\nexport { Docs };\n";