doccupine 0.0.1

package/dist/templates/theme-toggle.d.ts

@@ -0,0 +1 @@
+export declare const themeToggleTemplate = "\n\"use client\";\nimport { Theme, resetButton, ThemeContext } from \"cherry-styled-components/src/lib\";\nimport React, { useContext, useEffect } from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { useSearchParams } from \"next/navigation\";\nimport { theme as themeLight, themeDark } from \"@/app/theme\";\nimport { Icon } from \"@/app/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\n  const searchParams = useSearchParams();\n  const themeParam = searchParams.get(\"theme\");\n\n  useEffect(() => {\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  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\nexport { ToggleTheme };\n";

package/dist/templates/theme-toggle.js

@@ -0,0 +1,111 @@
+export const themeToggleTemplate = `
+"use client";
+import { Theme, resetButton, ThemeContext } from "cherry-styled-components/src/lib";
+import React, { useContext, useEffect } from "react";
+import styled, { css, useTheme } from "styled-components";
+import { useSearchParams } from "next/navigation";
+import { theme as themeLight, themeDark } from "@/app/theme";
+import { Icon } from "@/app/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 searchParams = useSearchParams();
+  const themeParam = searchParams.get("theme");
+
+  useEffect(() => {
+    if (themeParam === "light") {
+      setTheme(themeLight);
+      localStorage.theme = "light";
+    } else if (themeParam === "dark") {
+      setTheme(themeDark);
+      localStorage.theme = "dark";
+    }
+  }, [themeParam, setTheme]);
+
+  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>
+  );
+}
+
+export { ToggleTheme };
+`;

package/dist/templates/theme.d.ts

@@ -0,0 +1 @@
+export declare const themeTemplate = "\n\"use client\";\nexport const breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1440,\n  xxxl: 1920,\n};\n\nexport function mq(minWidth: keyof Breakpoints) {\n  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;\n}\n\nexport const spacing: Spacing = {\n  maxWidth: { xs: \"1280px\", xxxl: \"1440px\" },\n  padding: { xs: \"20px\", lg: \"40px\" },\n  radius: { xs: \"6px\", lg: \"12px\", xl: \"30px\" },\n  gridGap: { xs: \"20px\", lg: \"40px\" },\n};\n\nexport const colors: Colors = {\n  primaryLight: \"#93c5fd\",\n  primary: \"#3b82f6\",\n  primaryDark: \"#1e40af\",\n\n  secondaryLight: \"#475569\",\n  secondary: \"#1e293b\",\n  secondaryDark: \"#020617\",\n\n  tertiaryLight: \"#ebccb9\",\n  tertiary: \"#816b5a\",\n  tertiaryDark: \"#675445\",\n\n  grayLight: \"#e5e7eb\",\n  gray: \"#9ca3af\",\n  grayDark: \"#4b5563\",\n\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n\n  dark: \"#000000\",\n  light: \"#ffffff\",\n};\n\nexport const colorsDark: Colors = {\n  primaryLight: \"#9bcaff\",\n  primary: \"#1e7ae0\",\n  primaryDark: \"#033d7e\",\n\n  secondaryLight: \"#a4b17b\",\n  secondary: \"#5c6e46\",\n  secondaryDark: \"#354c2b\",\n\n  tertiaryLight: \"#0B0E13\",\n  tertiary: \"#372414\",\n  tertiaryDark: \"\",\n\n  grayLight: \"#1a1a1a\",\n  gray: \"#454444\",\n  grayDark: \"#808080\",\n\n  success: \"#84cc16\",\n  error: \"#ef4444\",\n  warning: \"#eab308\",\n  info: \"#06b6d4\",\n\n  dark: \"#ffffff\",\n  light: \"#000000\",\n};\n\nexport const shadows: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)\",\n};\n\nexport const shadowsDark: Shadows = {\n  xs: \"0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)\",\n  sm: \"0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)\",\n  md: \"0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)\",\n  lg: \"0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)\",\n  xl: \"0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)\",\n};\n\nexport const fonts: Fonts = {\n  text: \"Inter\",\n  head: \"Inter\",\n  mono: \"Roboto Mono\",\n};\n\nexport const fontSizes: FontSizes = {\n  hero1: { xs: \"72px\", lg: \"128px\" },\n  hero2: { xs: \"60px\", lg: \"96px\" },\n  hero3: { xs: \"36px\", lg: \"72px\" },\n\n  h1: { xs: \"40px\", lg: \"60px\" },\n  h2: { xs: \"30px\", lg: \"36px\" },\n  h3: { xs: \"28px\", lg: \"30px\" },\n  h4: { xs: \"24px\", lg: \"26px\" },\n  h5: { xs: \"18px\", lg: \"20px\" },\n  h6: { xs: \"16px\", lg: \"18px\" },\n\n  text: { xs: \"14px\", lg: \"16px\" },\n  strong: { xs: \"14px\", lg: \"16px\" },\n  small: { xs: \"12px\", lg: \"14px\" },\n\n  blockquote: { xs: \"16px\", lg: \"18px\" },\n  code: { xs: \"14px\", lg: \"16px\" },\n\n  button: { xs: \"16px\", lg: \"16px\" },\n  buttonBig: { xs: \"18px\", lg: \"18px\" },\n\n  input: { xs: \"16px\", lg: \"16px\" },\n  inputBig: { xs: \"18px\", lg: \"18px\" },\n};\n\nexport const lineHeights: LineHeights = {\n  hero1: { xs: \"1.1\", lg: \"1.1\" },\n  hero2: { xs: \"1.1\", lg: \"1.1\" },\n  hero3: { xs: \"1.17\", lg: \"1.1\" },\n\n  h1: { xs: \"1\", lg: \"1.07\" },\n  h2: { xs: \"1.2\", lg: \"1.2\" },\n  h3: { xs: \"1.3\", lg: \"1.5\" },\n  h4: { xs: \"1.3\", lg: \"1.5\" },\n  h5: { xs: \"1.6\", lg: \"1.5\" },\n  h6: { xs: \"1.6\", lg: \"1.6\" },\n\n  text: { xs: \"1.7\", lg: \"1.7\" },\n  strong: { xs: \"1.7\", lg: \"1.7\" },\n  small: { xs: \"1.7\", lg: \"1.7\" },\n\n  blockquote: { xs: \"1.7\", lg: \"1.7\" },\n  code: { xs: \"1.7\", lg: \"1.7\" },\n\n  button: { xs: \"1\", lg: \"1\" },\n  buttonBig: { xs: \"1\", lg: \"1\" },\n\n  input: { xs: \"1\", lg: \"1\" },\n  inputBig: { xs: \"1\", lg: \"1\" },\n};\n\nexport const theme: Theme = {\n  breakpoints,\n  spacing,\n  colors,\n  shadows,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: false,\n};\n\nexport const themeDark: Theme = {\n  breakpoints,\n  spacing,\n  colors: colorsDark,\n  shadows: shadowsDark,\n  fonts,\n  fontSizes,\n  lineHeights,\n  isDark: true,\n};\n\nexport interface Breakpoints<TNumber = number> {\n  xs: TNumber;\n  sm: TNumber;\n  md: TNumber;\n  lg: TNumber;\n  xl: TNumber;\n  xxl: TNumber;\n  xxxl: TNumber;\n}\n\nexport interface Spacing<TString = string> {\n  maxWidth: { xs: TString; xxxl: TString };\n  padding: { xs: TString; lg: TString };\n  radius: { xs: TString; lg: TString; xl: TString };\n  gridGap: { xs: TString; lg: TString };\n}\n\nexport interface Colors<TString = string> {\n  primaryLight: TString;\n  primary: TString;\n  primaryDark: TString;\n\n  secondaryLight: TString;\n  secondary: TString;\n  secondaryDark: TString;\n\n  tertiaryLight: TString;\n  tertiary: TString;\n  tertiaryDark: TString;\n\n  grayLight: TString;\n  gray: TString;\n  grayDark: TString;\n\n  success: TString;\n  error: TString;\n  warning: TString;\n  info: TString;\n\n  dark: TString;\n  light: TString;\n}\n\ninterface Shadows<TString = string> {\n  xs: TString;\n  sm: TString;\n  md: TString;\n  lg: TString;\n  xl: TString;\n}\n\nexport interface Fonts<TString = string> {\n  head: TString;\n  text: TString;\n  mono: TString;\n}\n\nexport interface FontSizes<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n}\n\nexport interface LineHeights<TString = string> {\n  hero1: { xs: TString; lg: TString };\n  hero2: { xs: TString; lg: TString };\n  hero3: { xs: TString; lg: TString };\n\n  h1: { xs: TString; lg: TString };\n  h2: { xs: TString; lg: TString };\n  h3: { xs: TString; lg: TString };\n  h4: { xs: TString; lg: TString };\n  h5: { xs: TString; lg: TString };\n  h6: { xs: TString; lg: TString };\n\n  text: { xs: TString; lg: TString };\n  strong: { xs: TString; lg: TString };\n  small: { xs: TString; lg: TString };\n\n  blockquote: { xs: TString; lg: TString };\n  code: { xs: TString; lg: TString };\n\n  button: { xs: TString; lg: TString };\n  buttonBig: { xs: TString; lg: TString };\n\n  input: { xs: TString; lg: TString };\n  inputBig: { xs: TString; lg: TString };\n}\n\nexport interface Theme {\n  breakpoints: Breakpoints;\n  spacing: Spacing;\n  colors: Colors;\n  shadows: Shadows;\n  fonts: Fonts;\n  fontSizes: FontSizes;\n  lineHeights: LineHeights;\n  isDark: boolean;\n}\n";

package/dist/templates/theme.js

@@ -0,0 +1,291 @@
+export const themeTemplate = `
+"use client";
+export const breakpoints: Breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1440,
+  xxxl: 1920,
+};
+
+export function mq(minWidth: keyof Breakpoints) {
+  return \`@media screen and (min-width: \${breakpoints[minWidth]}px)\`;
+}
+
+export const spacing: Spacing = {
+  maxWidth: { xs: "1280px", xxxl: "1440px" },
+  padding: { xs: "20px", lg: "40px" },
+  radius: { xs: "6px", lg: "12px", xl: "30px" },
+  gridGap: { xs: "20px", lg: "40px" },
+};
+
+export const colors: Colors = {
+  primaryLight: "#93c5fd",
+  primary: "#3b82f6",
+  primaryDark: "#1e40af",
+
+  secondaryLight: "#475569",
+  secondary: "#1e293b",
+  secondaryDark: "#020617",
+
+  tertiaryLight: "#ebccb9",
+  tertiary: "#816b5a",
+  tertiaryDark: "#675445",
+
+  grayLight: "#e5e7eb",
+  gray: "#9ca3af",
+  grayDark: "#4b5563",
+
+  success: "#84cc16",
+  error: "#ef4444",
+  warning: "#eab308",
+  info: "#06b6d4",
+
+  dark: "#000000",
+  light: "#ffffff",
+};
+
+export const colorsDark: Colors = {
+  primaryLight: "#9bcaff",
+  primary: "#1e7ae0",
+  primaryDark: "#033d7e",
+
+  secondaryLight: "#a4b17b",
+  secondary: "#5c6e46",
+  secondaryDark: "#354c2b",
+
+  tertiaryLight: "#0B0E13",
+  tertiary: "#372414",
+  tertiaryDark: "",
+
+  grayLight: "#1a1a1a",
+  gray: "#454444",
+  grayDark: "#808080",
+
+  success: "#84cc16",
+  error: "#ef4444",
+  warning: "#eab308",
+  info: "#06b6d4",
+
+  dark: "#ffffff",
+  light: "#000000",
+};
+
+export const shadows: Shadows = {
+  xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
+  sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
+  md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
+  lg: "0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)",
+  xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)",
+};
+
+export const shadowsDark: Shadows = {
+  xs: "0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)",
+  sm: "0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)",
+  md: "0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)",
+  lg: "0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)",
+  xl: "0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)",
+};
+
+export const fonts: Fonts = {
+  text: "Inter",
+  head: "Inter",
+  mono: "Roboto Mono",
+};
+
+export const fontSizes: FontSizes = {
+  hero1: { xs: "72px", lg: "128px" },
+  hero2: { xs: "60px", lg: "96px" },
+  hero3: { xs: "36px", lg: "72px" },
+
+  h1: { xs: "40px", lg: "60px" },
+  h2: { xs: "30px", lg: "36px" },
+  h3: { xs: "28px", lg: "30px" },
+  h4: { xs: "24px", lg: "26px" },
+  h5: { xs: "18px", lg: "20px" },
+  h6: { xs: "16px", lg: "18px" },
+
+  text: { xs: "14px", lg: "16px" },
+  strong: { xs: "14px", lg: "16px" },
+  small: { xs: "12px", lg: "14px" },
+
+  blockquote: { xs: "16px", lg: "18px" },
+  code: { xs: "14px", lg: "16px" },
+
+  button: { xs: "16px", lg: "16px" },
+  buttonBig: { xs: "18px", lg: "18px" },
+
+  input: { xs: "16px", lg: "16px" },
+  inputBig: { xs: "18px", lg: "18px" },
+};
+
+export const lineHeights: LineHeights = {
+  hero1: { xs: "1.1", lg: "1.1" },
+  hero2: { xs: "1.1", lg: "1.1" },
+  hero3: { xs: "1.17", lg: "1.1" },
+
+  h1: { xs: "1", lg: "1.07" },
+  h2: { xs: "1.2", lg: "1.2" },
+  h3: { xs: "1.3", lg: "1.5" },
+  h4: { xs: "1.3", lg: "1.5" },
+  h5: { xs: "1.6", lg: "1.5" },
+  h6: { xs: "1.6", lg: "1.6" },
+
+  text: { xs: "1.7", lg: "1.7" },
+  strong: { xs: "1.7", lg: "1.7" },
+  small: { xs: "1.7", lg: "1.7" },
+
+  blockquote: { xs: "1.7", lg: "1.7" },
+  code: { xs: "1.7", lg: "1.7" },
+
+  button: { xs: "1", lg: "1" },
+  buttonBig: { xs: "1", lg: "1" },
+
+  input: { xs: "1", lg: "1" },
+  inputBig: { xs: "1", lg: "1" },
+};
+
+export const theme: Theme = {
+  breakpoints,
+  spacing,
+  colors,
+  shadows,
+  fonts,
+  fontSizes,
+  lineHeights,
+  isDark: false,
+};
+
+export const themeDark: Theme = {
+  breakpoints,
+  spacing,
+  colors: colorsDark,
+  shadows: shadowsDark,
+  fonts,
+  fontSizes,
+  lineHeights,
+  isDark: true,
+};
+
+export interface Breakpoints<TNumber = number> {
+  xs: TNumber;
+  sm: TNumber;
+  md: TNumber;
+  lg: TNumber;
+  xl: TNumber;
+  xxl: TNumber;
+  xxxl: TNumber;
+}
+
+export interface Spacing<TString = string> {
+  maxWidth: { xs: TString; xxxl: TString };
+  padding: { xs: TString; lg: TString };
+  radius: { xs: TString; lg: TString; xl: TString };
+  gridGap: { xs: TString; lg: TString };
+}
+
+export interface Colors<TString = string> {
+  primaryLight: TString;
+  primary: TString;
+  primaryDark: TString;
+
+  secondaryLight: TString;
+  secondary: TString;
+  secondaryDark: TString;
+
+  tertiaryLight: TString;
+  tertiary: TString;
+  tertiaryDark: TString;
+
+  grayLight: TString;
+  gray: TString;
+  grayDark: TString;
+
+  success: TString;
+  error: TString;
+  warning: TString;
+  info: TString;
+
+  dark: TString;
+  light: TString;
+}
+
+interface Shadows<TString = string> {
+  xs: TString;
+  sm: TString;
+  md: TString;
+  lg: TString;
+  xl: TString;
+}
+
+export interface Fonts<TString = string> {
+  head: TString;
+  text: TString;
+  mono: TString;
+}
+
+export interface FontSizes<TString = string> {
+  hero1: { xs: TString; lg: TString };
+  hero2: { xs: TString; lg: TString };
+  hero3: { xs: TString; lg: TString };
+
+  h1: { xs: TString; lg: TString };
+  h2: { xs: TString; lg: TString };
+  h3: { xs: TString; lg: TString };
+  h4: { xs: TString; lg: TString };
+  h5: { xs: TString; lg: TString };
+  h6: { xs: TString; lg: TString };
+
+  text: { xs: TString; lg: TString };
+  strong: { xs: TString; lg: TString };
+  small: { xs: TString; lg: TString };
+
+  blockquote: { xs: TString; lg: TString };
+  code: { xs: TString; lg: TString };
+
+  button: { xs: TString; lg: TString };
+  buttonBig: { xs: TString; lg: TString };
+
+  input: { xs: TString; lg: TString };
+  inputBig: { xs: TString; lg: TString };
+}
+
+export interface LineHeights<TString = string> {
+  hero1: { xs: TString; lg: TString };
+  hero2: { xs: TString; lg: TString };
+  hero3: { xs: TString; lg: TString };
+
+  h1: { xs: TString; lg: TString };
+  h2: { xs: TString; lg: TString };
+  h3: { xs: TString; lg: TString };
+  h4: { xs: TString; lg: TString };
+  h5: { xs: TString; lg: TString };
+  h6: { xs: TString; lg: TString };
+
+  text: { xs: TString; lg: TString };
+  strong: { xs: TString; lg: TString };
+  small: { xs: TString; lg: TString };
+
+  blockquote: { xs: TString; lg: TString };
+  code: { xs: TString; lg: TString };
+
+  button: { xs: TString; lg: TString };
+  buttonBig: { xs: TString; lg: TString };
+
+  input: { xs: TString; lg: TString };
+  inputBig: { xs: TString; lg: TString };
+}
+
+export interface Theme {
+  breakpoints: Breakpoints;
+  spacing: Spacing;
+  colors: Colors;
+  shadows: Shadows;
+  fonts: Fonts;
+  fontSizes: FontSizes;
+  lineHeights: LineHeights;
+  isDark: boolean;
+}
+`;

package/dist/templates/typography.d.ts

@@ -0,0 +1 @@
+export declare const typographyTemplate = "\n\"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/typography.js

@@ -0,0 +1,52 @@
+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/utils/orderNavItems.d.ts

@@ -0,0 +1 @@
+export declare const orderNavItemsTemplate = "interface PagesProps {\n  slug: string;\n  title: string;\n  date: string;\n  category: string;\n  categoryOrder?: number;\n  order?: number;\n}\n\ninterface AccProps {\n  [key: string]: { categoryOrder: number; pages: { date: string; slug: string; title: string; order: number }[] };\n}\n\nfunction transformPagesToGroupedStructure(pages: PagesProps[]) {\n  const grouped = pages.reduce((acc: AccProps, page: PagesProps) => {\n    const category = page.category || 'Uncategorized';\n    \n    if (!acc[category]) {\n      acc[category] = {\n        categoryOrder: page.categoryOrder || 0,\n        pages: []\n      };\n    }\n    \n    acc[category].pages.push({\n      date: page.date,\n      slug: page.slug,\n      title: page.title,\n      order: page.order || 0\n    });\n    \n    return acc;\n  }, {});\n\n  return Object.entries(grouped)\n    .sort(([, a], [, b]) => a.categoryOrder - b.categoryOrder)\n    .map(([categoryName, categoryData], index) => ({\n      slug: index === 0 ? \"\" : categoryName.toLowerCase().replace(/s+/g, '-'),\n      label: categoryName,\n      links: categoryData.pages.sort((a, b) => a.order - b.order)\n    }));\n}\n\nexport { transformPagesToGroupedStructure };\n";

package/dist/templates/utils/orderNavItems.js

@@ -0,0 +1,45 @@
+export const orderNavItemsTemplate = `interface PagesProps {
+  slug: string;
+  title: string;
+  date: string;
+  category: string;
+  categoryOrder?: number;
+  order?: number;
+}
+
+interface AccProps {
+  [key: string]: { categoryOrder: number; pages: { date: string; slug: string; title: string; order: number }[] };
+}
+
+function transformPagesToGroupedStructure(pages: PagesProps[]) {
+  const grouped = pages.reduce((acc: AccProps, page: PagesProps) => {
+    const category = page.category || 'Uncategorized';
+    
+    if (!acc[category]) {
+      acc[category] = {
+        categoryOrder: page.categoryOrder || 0,
+        pages: []
+      };
+    }
+    
+    acc[category].pages.push({
+      date: page.date,
+      slug: page.slug,
+      title: page.title,
+      order: page.order || 0
+    });
+    
+    return acc;
+  }, {});
+
+  return Object.entries(grouped)
+    .sort(([, a], [, b]) => a.categoryOrder - b.categoryOrder)
+    .map(([categoryName, categoryData], index) => ({
+      slug: index === 0 ? "" : categoryName.toLowerCase().replace(/\s+/g, '-'),
+      label: categoryName,
+      links: categoryData.pages.sort((a, b) => a.order - b.order)
+    }));
+}
+
+export { transformPagesToGroupedStructure };
+`;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "doccupine",
+  "version": "0.0.1",
+  "description": "CLI tool to watch MDX files and generate Next.js beautiful documentation pages automatically",
+  "main": "dist/index.js",
+  "bin": {
+    "doccupine-beta": "dist/index.js"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node dist/index.js",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "doccupine",
+    "documentation",
+    "mdx",
+    "nextjs",
+    "cli",
+    "file-watcher",
+    "static-site-generator"
+  ],
+  "author": "Luan Gjokaj",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "chokidar": "^3.5.3",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.2.0",
+    "gray-matter": "^4.0.3",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.10.5",
+    "@types/prompts": "^2.4.9",
+    "typescript": "^5.3.3"
+  },
+  "files": [
+    "dist/**/*"
+  ]
+}