@kushagradhawan/kookie-blocks 0.1.2 → 0.1.3

package/dist/esm/components/code/types.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface CodeBlockProps {
+    children?: ReactNode;
+    code?: string;
+    language?: string;
+    preview?: ReactNode;
+    showCopy?: boolean;
+    showLanguage?: boolean;
+    file?: string;
+    collapsible?: boolean;
+    collapsedHeight?: number;
+    background?: "none" | "dots" | string;
+    backgroundProps?: {
+        dotSize?: number;
+        color?: string;
+        backgroundColor?: string;
+        height?: string;
+        width?: string;
+        radius?: string;
+    };
+    lightTheme?: string;
+    darkTheme?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/code/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/code/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAE7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAGF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/esm/components/code/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/components/code/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/index.d.ts

@@ -1,2 +1,3 @@
+export * from './code';
 export * from './hero';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/esm/components/index.js

@@ -1,2 +1,2 @@
-export*from"./hero";
+export*from"./code";export*from"./hero";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.ts"],
-  "sourcesContent": ["export * from './hero';\n"],
-  "mappings": "AAAA,WAAc",
+  "sourcesContent": ["export * from './code';\nexport * from './hero';\n"],
+  "mappings": "AAAA,WAAc,SACd,WAAc",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-blocks",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
@@ -91,13 +91,14 @@
     "prepublishOnly": "pnpm lint"
   },
   "dependencies": {
+    "@hugeicons/core-free-icons": "^2.0.0",
+    "@hugeicons/react": "^1.1.1",
     "@kushagradhawan/kookie-ui": "latest",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "shiki": "^1.24.2"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",

package/src/components/code/CodeBlock.tsx

@@ -0,0 +1,119 @@
+import React, { type ReactNode } from "react";
+import { Card, Flex } from "@kushagradhawan/kookie-ui";
+import { SyntaxHighlighter } from "./SyntaxHighlighter";
+import { CopyButton } from "./CopyButton";
+import { LanguageBadge } from "./LanguageBadge";
+import { PreviewSection } from "./PreviewSection";
+import type { CodeBlockProps } from "./types";
+
+function extractLanguageFromChildren(children?: ReactNode): string {
+  if (!children) return "text";
+
+  // Try to extract language from pre > code className
+  if (typeof children === "object" && children !== null && "props" in children) {
+    const childProps = (children as any).props;
+
+    // If children is a <pre><code className="language-xxx">
+    if (childProps?.children && typeof childProps.children === "object") {
+      const codeProps = (childProps.children as any).props;
+      const className = codeProps?.className || "";
+      const match = className.match(/language-([\w-]+)/i);
+      if (match) return match[1];
+    }
+
+    // Direct className on children
+    const className = childProps?.className || "";
+    const match = className.match(/language-([\w-]+)/i);
+    if (match) return match[1];
+  }
+
+  return "text";
+}
+
+function extractCodeFromChildren(children?: ReactNode): string {
+  if (!children) return "";
+
+  // Try to extract text from pre > code structure
+  if (typeof children === "object" && children !== null && "props" in children) {
+    const childProps = (children as any).props;
+
+    // If children is <pre><code>...</code></pre>
+    if (childProps?.children && typeof childProps.children === "object") {
+      const codeProps = (childProps.children as any).props;
+      const codeChildren = codeProps?.children;
+
+      if (typeof codeChildren === "string") {
+        return codeChildren;
+      }
+    }
+
+    // Direct text content
+    if (typeof childProps?.children === "string") {
+      return childProps.children;
+    }
+  }
+
+  if (typeof children === "string") {
+    return children;
+  }
+
+  return "";
+}
+
+export function CodeBlock({
+  children,
+  code,
+  language,
+  preview,
+  showCopy = true,
+  showLanguage = true,
+  lightTheme,
+  darkTheme,
+  background,
+  backgroundProps,
+}: CodeBlockProps) {
+  // Determine the code and language to display
+  let displayCode = code;
+  let displayLanguage = language;
+
+  // If children are provided (pre-highlighted from MDX), extract code and language
+  if (children && !code) {
+    displayCode = extractCodeFromChildren(children);
+    displayLanguage = language || extractLanguageFromChildren(children);
+  }
+
+  // Default language
+  if (!displayLanguage) {
+    displayLanguage = "text";
+  }
+
+  // If no code to display, render nothing
+  if (!displayCode && !children) {
+    return null;
+  }
+
+  return (
+    <Flex direction="column" className="code-block-wrapper" style={{ minWidth: 0 }} my="2">
+      {preview && (
+        <PreviewSection background={background} backgroundProps={backgroundProps}>
+          {preview}
+        </PreviewSection>
+      )}
+
+      <Card size="2" variant="soft">
+        <Flex gap="2" direction="column">
+          <Flex align="start" justify="between">
+            {showLanguage && <LanguageBadge language={displayLanguage} />}
+            {showCopy && displayCode && <CopyButton code={displayCode} />}
+          </Flex>
+
+          {/* If we have runtime code, use SyntaxHighlighter */}
+          {code && <SyntaxHighlighter code={code} language={displayLanguage} lightTheme={lightTheme} darkTheme={darkTheme} />}
+
+          {/* If we have pre-highlighted children from MDX, render them */}
+          {children && !code && <div className="code-block-content">{children}</div>}
+        </Flex>
+      </Card>
+    </Flex>
+  );
+}

package/src/components/code/CopyButton.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@kushagradhawan/kookie-ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Copy01Icon, Tick01Icon } from "@hugeicons/core-free-icons";
+
+interface CopyButtonProps {
+  code: string;
+}
+
+export function CopyButton({ code }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    if (!code.trim()) return;
+
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+
+      if (resetTimeoutRef.current) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+
+      resetTimeoutRef.current = setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch {
+      // Silently fail
+    }
+  }, [code]);
+
+  return (
+    <Button size="2" tooltip={copied ? "Copied" : "Copy code"} variant="ghost" onClick={handleCopy} aria-label={copied ? "Copied" : "Copy code"}>
+      <HugeiconsIcon icon={copied ? Tick01Icon : Copy01Icon} /> Copy
+    </Button>
+  );
+}

package/src/components/code/LanguageBadge.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Code } from "@kushagradhawan/kookie-ui";
+
+interface LanguageBadgeProps {
+  language: string;
+}
+
+function formatLanguage(lang: string): string {
+  const languageMap: Record<string, string> = {
+    js: "JS",
+    jsx: "JSX",
+    ts: "TS",
+    tsx: "TSX",
+    py: "Python",
+    rb: "Ruby",
+    sh: "Shell",
+    bash: "Bash",
+    text: "plaintext",
+  };
+
+  return languageMap[lang.toLowerCase()] || lang;
+}
+
+export function LanguageBadge({ language }: LanguageBadgeProps) {
+  const displayLanguage = formatLanguage(language);
+
+  return (
+    <Code size="1" color="gray" highContrast>
+      {displayLanguage}
+    </Code>
+  );
+}
+

package/src/components/code/PreviewSection.tsx

@@ -0,0 +1,52 @@
+import React, { type ReactNode } from "react";
+import { Box } from "@kushagradhawan/kookie-ui";
+
+interface PreviewSectionProps {
+  children: ReactNode;
+  background?: "none" | "dots" | string;
+  backgroundProps?: {
+    dotSize?: number;
+    color?: string;
+    backgroundColor?: string;
+    height?: string;
+    width?: string;
+    radius?: string;
+  };
+}
+
+export function PreviewSection({ children, background = "none", backgroundProps = {} }: PreviewSectionProps) {
+  const { dotSize = 2, color = "#d4d4d8", backgroundColor = "transparent", height = "auto", width = "100%", radius = "var(--radius-3)" } = backgroundProps;
+
+  const backgroundStyle =
+    background === "dots"
+      ? {
+          backgroundImage: `radial-gradient(circle, ${color} ${dotSize}px, ${backgroundColor} ${dotSize}px)`,
+          backgroundSize: "20px 20px",
+        }
+      : background !== "none"
+        ? {
+            backgroundImage: `url(${background})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }
+        : {};
+
+  return (
+    <Box
+      p="4"
+      style={{
+        ...backgroundStyle,
+        height,
+        width,
+        borderRadius: radius,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "200px",
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+

package/src/components/code/SyntaxHighlighter.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
+import { Box, Code } from "@kushagradhawan/kookie-ui";
+
+interface SyntaxHighlighterProps {
+  code: string;
+  language: string;
+  lightTheme?: string;
+  darkTheme?: string;
+}
+
+const DEFAULT_LIGHT_THEME = "one-light";
+const DEFAULT_DARK_THEME = "one-dark-pro";
+
+export function SyntaxHighlighter({ code, language, lightTheme = DEFAULT_LIGHT_THEME, darkTheme = DEFAULT_DARK_THEME }: SyntaxHighlighterProps) {
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    codeToHtml(code, {
+      lang: language,
+      themes: {
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      defaultColor: false,
+    })
+      .then((html) => {
+        if (!cancelled) {
+          setHighlighted(html);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setHighlighted(null);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, lightTheme, darkTheme]);
+
+  if (!highlighted) {
+    return (
+      <pre className="code-block-content">
+        <Code size="3">{code}</Code>
+      </pre>
+    );
+  }
+
+  return <Box className="code-block-content" width="100%" style={{ minWidth: 0 }} dangerouslySetInnerHTML={{ __html: highlighted }} />;
+}
+

package/src/components/code/index.ts

@@ -0,0 +1,3 @@
+// Public API - only CodeBlock is exported
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./types";

package/src/components/code/types.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+export interface CodeBlockProps {
+  // Content modes (mutually exclusive)
+  children?: ReactNode; // Pre-highlighted HTML from build-time (MDX)
+  code?: string; // Raw code to highlight at runtime
+  language?: string; // Language for runtime highlighting
+
+  // Optional features
+  preview?: ReactNode; // Preview component (for docs)
+  showCopy?: boolean; // Default: true
+  showLanguage?: boolean; // Default: true
+  file?: string; // File path label
+  collapsible?: boolean; // Enable expand/collapse
+  collapsedHeight?: number; // Default: 360px
+
+  // Preview styling (for kookie-ui docs)
+  background?: "none" | "dots" | string; // Background type
+  backgroundProps?: {
+    dotSize?: number;
+    color?: string;
+    backgroundColor?: string;
+    height?: string;
+    width?: string;
+    radius?: string;
+  };
+
+  // Theme
+  lightTheme?: string; // Default: 'one-light'
+  darkTheme?: string; // Default: 'one-dark-pro'
+}
+

package/src/components/index.css

@@ -1 +1,89 @@
 /* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
+
+/* ============================================
+   Code Block Component Styles
+   ============================================ */
+
+/* Code block wrapper - constrain width in flex containers */
+.code-block-wrapper {
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Code block content (the pre part, below the header) */
+.code-block-content {
+  width: 100%;
+  min-width: 0;
+}
+
+.code-block-wrapper pre,
+.code-block-wrapper .code-block-content pre {
+  overflow-x: auto;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Ensure Shiki-generated pre elements fill width */
+.code-block-content > pre {
+  width: 100% !important;
+  min-width: 0;
+}
+
+/* Code elements inside pre */
+.code-block-wrapper pre code,
+.code-block-wrapper .code-block-content pre code {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-2);
+  line-height: 1.75;
+  background: none !important;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  counter-reset: line;
+}
+
+/* Shiki line spans */
+.code-block-wrapper pre code .line,
+.code-block-wrapper .code-block-content pre code .line {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+/* Line numbers */
+.code-block-wrapper pre code .line::before,
+.code-block-wrapper .code-block-content pre code .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
+  font-size: var(--font-size-1);
+  color: var(--gray-a9);
+  user-select: none;
+  flex-shrink: 0;
+  margin-right: var(--space-4);
+}
+
+/* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
+.code-block-wrapper pre.shiki span {
+  color: var(--shiki-light) !important;
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  text-decoration: var(--shiki-light-text-decoration);
+}
+
+/* Override with dark theme colors when inside a dark context */
+.dark .code-block-wrapper pre.shiki span,
+.dark-theme .code-block-wrapper pre.shiki span,
+[data-appearance="dark"] .code-block-wrapper pre.shiki span {
+  color: var(--shiki-dark) !important;
+  font-style: var(--shiki-dark-font-style);
+  font-weight: var(--shiki-dark-font-weight);
+  text-decoration: var(--shiki-dark-text-decoration);
+}

package/src/components/index.ts

@@ -1 +1,2 @@
+export * from './code';
 export * from './hero';

package/styles.css

@@ -1,2 +1,84 @@
 /* Kookie Blocks base styles. Keep minimal; rely on Kookie UI tokens/utilities. */
 /* Components CSS aggregator for Kookie Blocks (e.g., hero variants if styled). */
+/* ============================================
+   Code Block Component Styles
+   ============================================ */
+/* Code block wrapper - constrain width in flex containers */
+.code-block-wrapper {
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+/* Code block content (the pre part, below the header) */
+.code-block-content {
+  width: 100%;
+  min-width: 0;
+}
+.code-block-wrapper pre,
+.code-block-wrapper .code-block-content pre {
+  overflow-x: auto;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+/* Ensure Shiki-generated pre elements fill width */
+.code-block-content > pre {
+  width: 100% !important;
+  min-width: 0;
+}
+/* Code elements inside pre */
+.code-block-wrapper pre code,
+.code-block-wrapper .code-block-content pre code {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-2);
+  line-height: 1.75;
+  background: none !important;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  counter-reset: line;
+}
+/* Shiki line spans */
+.code-block-wrapper pre code .line,
+.code-block-wrapper .code-block-content pre code .line {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+/* Line numbers */
+.code-block-wrapper pre code .line::before,
+.code-block-wrapper .code-block-content pre code .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
+  font-size: var(--font-size-1);
+  color: var(--gray-a9);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  margin-right: var(--space-4);
+}
+/* Default to light theme for all tokens (codeToHtml with defaultColor: false) */
+.code-block-wrapper pre.shiki span {
+  color: var(--shiki-light) !important;
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  -webkit-text-decoration: var(--shiki-light-text-decoration);
+          text-decoration: var(--shiki-light-text-decoration);
+}
+/* Override with dark theme colors when inside a dark context */
+.dark .code-block-wrapper pre.shiki span,
+.dark-theme .code-block-wrapper pre.shiki span,
+[data-appearance="dark"] .code-block-wrapper pre.shiki span {
+  color: var(--shiki-dark) !important;
+  font-style: var(--shiki-dark-font-style);
+  font-weight: var(--shiki-dark-font-weight);
+  -webkit-text-decoration: var(--shiki-dark-text-decoration);
+          text-decoration: var(--shiki-dark-text-decoration);
+}