doccupine 0.0.74 → 0.0.76

package/dist/lib/structures.js

@@ -27,6 +27,7 @@ import { calloutTemplate } from "../templates/components/layout/Callout.js";
 import { cardTemplate } from "../templates/components/layout/Card.js";
 import { cherryThemeProviderTemplate } from "../templates/components/layout/CherryThemeProvider.js";
 import { clientThemeProviderTemplate } from "../templates/components/layout/ClientThemeProvider.js";
+import { colorSwatchTemplate } from "../templates/components/layout/ColorSwatch.js";
 import { codeTemplate } from "../templates/components/layout/Code.js";
 import { columnsTemplate } from "../templates/components/layout/Columns.js";
 import { demoThemeTemplate } from "../templates/components/layout/DemoTheme.js";
@@ -66,6 +67,7 @@ import { buttonsMdxTemplate } from "../templates/mdx/buttons.mdx.js";
 import { calloutsMdxTemplate } from "../templates/mdx/callouts.mdx.js";
 import { cardsMdxTemplate } from "../templates/mdx/cards.mdx.js";
 import { codeMdxTemplate } from "../templates/mdx/code.mdx.js";
+import { colorSwatchesMdxTemplate } from "../templates/mdx/color-swatches.mdx.js";
 import { columnsMdxTemplate } from "../templates/mdx/columns.mdx.js";
 import { commandsMdxTemplate } from "../templates/mdx/commands.mdx.js";
 import { componentsMdxTemplate } from "../templates/mdx/components.mdx.js";
@@ -146,6 +148,7 @@ export const appStructure = {
     "components/layout/Card.tsx": cardTemplate,
     "components/layout/CherryThemeProvider.tsx": cherryThemeProviderTemplate,
     "components/layout/ClientThemeProvider.tsx": clientThemeProviderTemplate,
+    "components/layout/ColorSwatch.tsx": colorSwatchTemplate,
     "components/layout/Code.tsx": codeTemplate,
     "components/layout/Columns.tsx": columnsTemplate,
     "components/layout/DemoTheme.tsx": demoThemeTemplate,
@@ -174,6 +177,7 @@ export const startingDocsStructure = {
     "callouts.mdx": calloutsMdxTemplate,
     "cards.mdx": cardsMdxTemplate,
     "code.mdx": codeMdxTemplate,
+    "color-swatches.mdx": colorSwatchesMdxTemplate,
     "columns.mdx": columnsMdxTemplate,
     "commands.mdx": commandsMdxTemplate,
     "components.mdx": componentsMdxTemplate,

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

@@ -1 +1 @@
-export declare const mdxComponentsTemplate = "import React from \"react\";\nimport Link from \"next/link\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype MDXComponents = Record<string, React.ComponentType<any>>;\nimport { Space } from \"cherry-styled-components\";\nimport { Code as CodeBlock } from \"@/components/layout/Code\";\nimport { Card } from \"@/components/layout/Card\";\nimport { Accordion } from \"@/components/layout/Accordion\";\nimport { Tabs, TabContent } from \"@/components/layout/Tabs\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { Columns } from \"@/components/layout/Columns\";\nimport { Field } from \"@/components/layout/Field\";\nimport { Update } from \"@/components/layout/Update\";\nimport { Steps, Step } from \"@/components/layout/Steps\";\nimport { Button } from \"@/components/layout/Button\";\nimport { DemoTheme } from \"@/components/layout/DemoTheme\";\n\ninterface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children?: React.ReactNode;\n}\n\ninterface PreProps extends React.HTMLAttributes<HTMLPreElement> {\n  children?: React.ReactNode;\n}\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n  if (Array.isArray(children))\n    return children.map(extractAllTextFromChildren).join(\"\");\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<{\n      children?: React.ReactNode;\n    }>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n  return \"\";\n}\n\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\n// Map <pre><code class=\"language-xyz\"> to our <Code /> component\nfunction Pre(props: PreProps) {\n  const child = React.Children.only(props.children) as React.ReactElement<{\n    className?: string;\n    children?: React.ReactNode;\n  }> | null;\n  if (child && child.type === \"code\") {\n    const className = child.props.className || \"\";\n    const match = /language-(\\w+)/.exec(className);\n    const language = match ? match[1] : undefined;\n    const code = extractAllTextFromChildren(child.props.children).replace(\n      /\\n$/,\n      \"\",\n    );\n    if (language) {\n      return (\n        <CodeBlock className={className} code={code} language={language} />\n      );\n    }\n  }\n  return <pre {...props} />;\n}\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n  return {\n    // Headings with auto-generated ids for TOC and deep links\n    h1: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h1 id={id} {...props}>\n          {children}\n        </h1>\n      );\n    },\n    h2: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h2 id={id} {...props}>\n          {children}\n        </h2>\n      );\n    },\n    h3: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h3 id={id} {...props}>\n          {children}\n        </h3>\n      );\n    },\n    h4: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h4 id={id} {...props}>\n          {children}\n        </h4>\n      );\n    },\n    h5: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h5 id={id} {...props}>\n          {children}\n        </h5>\n      );\n    },\n    h6: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h6 id={id} {...props}>\n          {children}\n        </h6>\n      );\n    },\n\n    // Links - use Next.js Link for internal paths\n    a: ({\n      href,\n      children,\n      ...props\n    }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {\n      if (href && href.startsWith(\"/\")) {\n        return (\n          <Link href={href} {...props}>\n            {children}\n          </Link>\n        );\n      }\n      return (\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n          {children}\n        </a>\n      );\n    },\n\n    // Tables - wrap in a div for responsive overflow\n    table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (\n      <div className=\"table-wrapper\">\n        <table {...props} />\n      </div>\n    ),\n\n    // Code blocks\n    pre: Pre,\n\n    // Expose your custom components for MDX usage\n    Card,\n    Accordion,\n    Tabs,\n    TabContent,\n    Callout,\n    Icon,\n    Columns,\n    Field,\n    Update,\n    Steps,\n    Step,\n    Button,\n    DemoTheme,\n    Space,\n    ...components,\n  };\n}\n";
+export declare const mdxComponentsTemplate = "import React from \"react\";\nimport Link from \"next/link\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype MDXComponents = Record<string, React.ComponentType<any>>;\nimport { Space } from \"cherry-styled-components\";\nimport { Code as CodeBlock } from \"@/components/layout/Code\";\nimport { Card } from \"@/components/layout/Card\";\nimport { Accordion } from \"@/components/layout/Accordion\";\nimport { Tabs, TabContent } from \"@/components/layout/Tabs\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { Columns } from \"@/components/layout/Columns\";\nimport { Field } from \"@/components/layout/Field\";\nimport { Update } from \"@/components/layout/Update\";\nimport { Steps, Step } from \"@/components/layout/Steps\";\nimport { Button } from \"@/components/layout/Button\";\nimport { ColorSwatch, ColorSwatchGroup } from \"@/components/layout/ColorSwatch\";\nimport { DemoTheme } from \"@/components/layout/DemoTheme\";\n\ninterface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children?: React.ReactNode;\n}\n\ninterface PreProps extends React.HTMLAttributes<HTMLPreElement> {\n  children?: React.ReactNode;\n}\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n  if (Array.isArray(children))\n    return children.map(extractAllTextFromChildren).join(\"\");\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<{\n      children?: React.ReactNode;\n    }>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n  return \"\";\n}\n\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\n// Map <pre><code class=\"language-xyz\"> to our <Code /> component\nfunction Pre(props: PreProps) {\n  const child = React.Children.only(props.children) as React.ReactElement<{\n    className?: string;\n    children?: React.ReactNode;\n  }> | null;\n  if (child && child.type === \"code\") {\n    const className = child.props.className || \"\";\n    const match = /language-(\\w+)/.exec(className);\n    const language = match ? match[1] : undefined;\n    const code = extractAllTextFromChildren(child.props.children).replace(\n      /\\n$/,\n      \"\",\n    );\n    if (language) {\n      return (\n        <CodeBlock className={className} code={code} language={language} />\n      );\n    }\n  }\n  return <pre {...props} />;\n}\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n  return {\n    // Headings with auto-generated ids for TOC and deep links\n    h1: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h1 id={id} {...props}>\n          {children}\n        </h1>\n      );\n    },\n    h2: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h2 id={id} {...props}>\n          {children}\n        </h2>\n      );\n    },\n    h3: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h3 id={id} {...props}>\n          {children}\n        </h3>\n      );\n    },\n    h4: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h4 id={id} {...props}>\n          {children}\n        </h4>\n      );\n    },\n    h5: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h5 id={id} {...props}>\n          {children}\n        </h5>\n      );\n    },\n    h6: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h6 id={id} {...props}>\n          {children}\n        </h6>\n      );\n    },\n\n    // Links - use Next.js Link for internal paths\n    a: ({\n      href,\n      children,\n      ...props\n    }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {\n      if (href && href.startsWith(\"/\")) {\n        return (\n          <Link href={href} {...props}>\n            {children}\n          </Link>\n        );\n      }\n      return (\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n          {children}\n        </a>\n      );\n    },\n\n    // Tables - wrap in a div for responsive overflow\n    table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (\n      <div className=\"table-wrapper\">\n        <table {...props} />\n      </div>\n    ),\n\n    // Code blocks\n    pre: Pre,\n\n    // Expose your custom components for MDX usage\n    Card,\n    Accordion,\n    Tabs,\n    TabContent,\n    Callout,\n    Icon,\n    Columns,\n    Field,\n    Update,\n    Steps,\n    Step,\n    Button,\n    ColorSwatch,\n    ColorSwatchGroup,\n    DemoTheme,\n    Space,\n    ...components,\n  };\n}\n";

package/dist/templates/components/MDXComponents.js

@@ -15,6 +15,7 @@ import { Field } from "@/components/layout/Field";
 import { Update } from "@/components/layout/Update";
 import { Steps, Step } from "@/components/layout/Steps";
 import { Button } from "@/components/layout/Button";
+import { ColorSwatch, ColorSwatchGroup } from "@/components/layout/ColorSwatch";
 import { DemoTheme } from "@/components/layout/DemoTheme";
 
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -167,6 +168,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     Steps,
     Step,
     Button,
+    ColorSwatch,
+    ColorSwatchGroup,
     DemoTheme,
     Space,
     ...components,

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

@@ -1 +1 @@
-export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";
+export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit !important;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";

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

@@ -25,7 +25,7 @@ const StyledLinkButton = styled(Link)<LinkButtonProps>\`
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
   & p {
-    color: inherit;
+    color: inherit !important;
   }
 
   & svg.lucide {
@@ -40,7 +40,7 @@ const ButtonBase = styled.button<ButtonProps>\`
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
   & p {
-    color: inherit;
+    color: inherit !important;
   }
 
   & svg.lucide {

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

@@ -0,0 +1 @@
+export declare const colorSwatchTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components\";\nimport { mq } from \"@/app/theme\";\n\nconst StyledSwatchGroup = styled.div<{ theme: Theme }>`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: ${({ theme }) => theme.spacing.gridGap.xs};\n\n  ${mq(\"md\")} {\n    grid-template-columns: repeat(3, 1fr);\n  }\n`;\n\nconst StyledSwatch = styled.div<{ theme: Theme }>`\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  overflow: hidden;\n`;\n\nconst StyledColor = styled.div<{\n  theme: Theme;\n  $color: string;\n  $lightText: boolean;\n}>`\n  background: ${({ $color }) => $color};\n  height: 80px;\n  display: flex;\n  align-items: flex-end;\n  padding: 8px 12px;\n  color: ${({ $lightText }) => ($lightText ? \"#FFFFFF\" : \"#000000\")};\n  font-size: 12px;\n  font-family: monospace;\n  opacity: 0.8;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n`;\n\nconst StyledLabel = styled.div<{ theme: Theme }>`\n  padding: 10px 12px;\n  background: ${({ theme }) => theme.colors.light};\n  ${({ theme }) => styledText(theme)};\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  code {\n    color: ${({ theme }) => theme.colors.dark};\n    font-weight: 600;\n    font-size: 13px;\n  }\n`;\n\nfunction luminance(hex: string): number {\n  const rgb = hex\n    .replace(\"#\", \"\")\n    .match(/.{2}/g)!\n    .map((c) => parseInt(c, 16) / 255);\n\n  const [r, g, b] = rgb.map((c) =>\n    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n  );\n\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\ninterface ColorSwatchProps {\n  token: string;\n  value: string;\n}\n\nfunction ColorSwatch({ token, value }: ColorSwatchProps) {\n  const useLightText = luminance(value) < 0.4;\n\n  return (\n    <StyledSwatch>\n      <StyledColor $color={value} $lightText={useLightText}>\n        {value}\n      </StyledColor>\n      <StyledLabel>\n        <code className=\"token\">{token}</code>\n      </StyledLabel>\n    </StyledSwatch>\n  );\n}\n\ninterface ColorSwatchGroupProps {\n  children: React.ReactNode;\n}\n\nfunction ColorSwatchGroup({ children }: ColorSwatchGroupProps) {\n  return <StyledSwatchGroup>{children}</StyledSwatchGroup>;\n}\n\nexport { ColorSwatch, ColorSwatchGroup };\n";

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

@@ -0,0 +1,95 @@
+export const colorSwatchTemplate = `"use client";
+import styled from "styled-components";
+import { styledText, Theme } from "cherry-styled-components";
+import { mq } from "@/app/theme";
+
+const StyledSwatchGroup = styled.div<{ theme: Theme }>\`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: \${({ theme }) => theme.spacing.gridGap.xs};
+
+  \${mq("md")} {
+    grid-template-columns: repeat(3, 1fr);
+  }
+\`;
+
+const StyledSwatch = styled.div<{ theme: Theme }>\`
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  border-radius: \${({ theme }) => theme.spacing.radius.lg};
+  overflow: hidden;
+\`;
+
+const StyledColor = styled.div<{
+  theme: Theme;
+  $color: string;
+  $lightText: boolean;
+}>\`
+  background: \${({ $color }) => $color};
+  height: 80px;
+  display: flex;
+  align-items: flex-end;
+  padding: 8px 12px;
+  color: \${({ $lightText }) => ($lightText ? "#FFFFFF" : "#000000")};
+  font-size: 12px;
+  font-family: monospace;
+  opacity: 0.8;
+  border-bottom: solid 1px \${({ theme }) => theme.colors.grayLight};
+\`;
+
+const StyledLabel = styled.div<{ theme: Theme }>\`
+  padding: 10px 12px;
+  background: \${({ theme }) => theme.colors.light};
+  \${({ theme }) => styledText(theme)};
+  font-size: 13px;
+  color: \${({ theme }) => theme.colors.grayDark};
+
+  code {
+    color: \${({ theme }) => theme.colors.dark};
+    font-weight: 600;
+    font-size: 13px;
+  }
+\`;
+
+function luminance(hex: string): number {
+  const rgb = hex
+    .replace("#", "")
+    .match(/.{2}/g)!
+    .map((c) => parseInt(c, 16) / 255);
+
+  const [r, g, b] = rgb.map((c) =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),
+  );
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+interface ColorSwatchProps {
+  token: string;
+  value: string;
+}
+
+function ColorSwatch({ token, value }: ColorSwatchProps) {
+  const useLightText = luminance(value) < 0.4;
+
+  return (
+    <StyledSwatch>
+      <StyledColor $color={value} $lightText={useLightText}>
+        {value}
+      </StyledColor>
+      <StyledLabel>
+        <code className="token">{token}</code>
+      </StyledLabel>
+    </StyledSwatch>
+  );
+}
+
+interface ColorSwatchGroupProps {
+  children: React.ReactNode;
+}
+
+function ColorSwatchGroup({ children }: ColorSwatchGroupProps) {
+  return <StyledSwatchGroup>{children}</StyledSwatchGroup>;
+}
+
+export { ColorSwatch, ColorSwatchGroup };
+`;

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

@@ -1 +1 @@
-export declare const sharedStyledTemplate = "\"use client\";\nimport { mq, styledSmall, styledText, Theme } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\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    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\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 styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\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 10px 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\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: transparent;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";
+export declare const sharedStyledTemplate = "\"use client\";\nimport { mq, styledSmall, styledText, Theme } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const styledAnchor = css<{ theme: Theme }>`\n  & a:not([class]):not(:has(img)) {\n    color: inherit;\n    transition: all 0.3s ease;\n    text-decoration: none;\n    box-shadow: 0 2px 0 0 ${({ theme }) => theme.colors.primary};\n\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      box-shadow: 0 1px 0 0 ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\nexport const stylesLists = css<{ theme: Theme }>`\n  & ul,\n  & ol {\n    & li {\n      & > .code-wrapper {\n        margin: 10px 0;\n      }\n    }\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    & ul {\n      padding-left: 15px;\n    }\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\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 styledTable = css<{ theme: Theme }>`\n  & .table-wrapper {\n    overflow-x: auto;\n    width: 100%;\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 10px 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\nexport const StyledSmallButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  background: transparent;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 6px 8px;\n  font-size: 12px;\n  font-family: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n";

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

@@ -22,7 +22,7 @@ export const interactiveStyles = css<{ theme: Theme }>\`
 \`;
 
 export const styledAnchor = css<{ theme: Theme }>\`
-  & a:not([class]) {
+  & a:not([class]):not(:has(img)) {
     color: inherit;
     transition: all 0.3s ease;
     text-decoration: none;

package/dist/templates/mdx/color-swatches.mdx.d.ts

@@ -0,0 +1 @@
+export declare const colorSwatchesMdxTemplate = "---\ntitle: \"Color Swatches\"\ndescription: \"Display color palettes with labeled swatches to document your theme colors.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Color Swatches\nDisplay color palettes with labeled swatches to document your theme colors.\n\nThe `ColorSwatch` component renders a visual preview of a color alongside its token name, and `ColorSwatchGroup` arranges multiple swatches in a responsive grid.\n\n## Usage\nYou can use the ColorSwatch components directly within your MDX files without any import:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n\n## Dark Colors\n\nText color automatically adapts based on the background luminance, so dark swatches display white text:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n\n## ColorSwatch Properties\n\n<Field value=\"token\" type=\"string\" required>\n  The name or label displayed below the color preview (e.g. a design token name).\n</Field>\n\n<Field value=\"value\" type=\"string\" required>\n  A hex color value (e.g. `#6366F1`). Displayed inside the color preview and used as the background.\n</Field>\n\n## ColorSwatchGroup Properties\n\n<Field value=\"children\" type=\"node\" required>\n  One or more `ColorSwatch` components to display in a responsive grid.\n</Field>";

package/dist/templates/mdx/color-swatches.mdx.js

@@ -0,0 +1,75 @@
+export const colorSwatchesMdxTemplate = `---
+title: "Color Swatches"
+description: "Display color palettes with labeled swatches to document your theme colors."
+date: "2026-02-19"
+category: "Components"
+categoryOrder: 1
+order: 8
+---
+# Color Swatches
+Display color palettes with labeled swatches to document your theme colors.
+
+The \`ColorSwatch\` component renders a visual preview of a color alongside its token name, and \`ColorSwatchGroup\` arranges multiple swatches in a responsive grid.
+
+## Usage
+You can use the ColorSwatch components directly within your MDX files without any import:
+
+~~~mdx
+<ColorSwatchGroup>
+  <ColorSwatch token="primary" value="#6366F1" />
+  <ColorSwatch token="secondary" value="#EC4899" />
+  <ColorSwatch token="success" value="#10B981" />
+  <ColorSwatch token="warning" value="#F59E0B" />
+  <ColorSwatch token="danger" value="#EF4444" />
+  <ColorSwatch token="info" value="#3B82F6" />
+</ColorSwatchGroup>
+~~~
+
+<ColorSwatchGroup>
+  <ColorSwatch token="primary" value="#6366F1" />
+  <ColorSwatch token="secondary" value="#EC4899" />
+  <ColorSwatch token="success" value="#10B981" />
+  <ColorSwatch token="warning" value="#F59E0B" />
+  <ColorSwatch token="danger" value="#EF4444" />
+  <ColorSwatch token="info" value="#3B82F6" />
+</ColorSwatchGroup>
+
+## Dark Colors
+
+Text color automatically adapts based on the background luminance, so dark swatches display white text:
+
+~~~mdx
+<ColorSwatchGroup>
+  <ColorSwatch token="dark" value="#1E1E2E" />
+  <ColorSwatch token="grayDark" value="#374151" />
+  <ColorSwatch token="gray" value="#6B7280" />
+  <ColorSwatch token="grayLight" value="#D1D5DB" />
+  <ColorSwatch token="light" value="#F9FAFB" />
+  <ColorSwatch token="white" value="#FFFFFF" />
+</ColorSwatchGroup>
+~~~
+
+<ColorSwatchGroup>
+  <ColorSwatch token="dark" value="#1E1E2E" />
+  <ColorSwatch token="grayDark" value="#374151" />
+  <ColorSwatch token="gray" value="#6B7280" />
+  <ColorSwatch token="grayLight" value="#D1D5DB" />
+  <ColorSwatch token="light" value="#F9FAFB" />
+  <ColorSwatch token="white" value="#FFFFFF" />
+</ColorSwatchGroup>
+
+## ColorSwatch Properties
+
+<Field value="token" type="string" required>
+  The name or label displayed below the color preview (e.g. a design token name).
+</Field>
+
+<Field value="value" type="string" required>
+  A hex color value (e.g. \`#6366F1\`). Displayed inside the color preview and used as the background.
+</Field>
+
+## ColorSwatchGroup Properties
+
+<Field value="children" type="node" required>
+  One or more \`ColorSwatch\` components to display in a responsive grid.
+</Field>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {