@kushagradhawan/kookie-blocks 0.1.6 → 0.1.8

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

@@ -1,24 +1,143 @@
-import type { ReactNode } from "react";
+import type { ReactNode, ReactElement } from "react";
+/**
+ * Shiki syntax highlighting configuration.
+ * Controls themes and advanced highlighting options.
+ */
+export interface ShikiConfig {
+    /**
+     * Theme names for light and dark modes.
+     * Uses Shiki's dual-theme mode for automatic theme switching.
+     * @default { light: 'one-light', dark: 'one-dark-pro' }
+     */
+    themes?: {
+        light?: string;
+        dark?: string;
+    };
+    /**
+     * Language aliases for custom language mapping.
+     * @example { js: 'javascript', ts: 'typescript' }
+     */
+    langAlias?: Record<string, string>;
+    /**
+     * Shiki transformers for custom code transformations.
+     * Useful for line highlighting, diff syntax, etc.
+     * @see https://shiki.style/guide/transformers
+     */
+    transformers?: any[];
+    /**
+     * Metadata string passed to transformers.
+     * Often used for line highlighting syntax like `{1,3-5}`.
+     */
+    meta?: string;
+}
+/**
+ * Background configuration for preview section.
+ */
+export interface PreviewBackgroundProps {
+    /** Dot size in pixels (for dots background) */
+    dotSize?: number;
+    /** Dot color (CSS value) */
+    color?: string;
+    /** Background color (CSS value) */
+    backgroundColor?: string;
+    /** Preview section height */
+    height?: string;
+    /** Preview section width */
+    width?: string;
+    /** Border radius token (e.g., "3" for var(--radius-3)) */
+    radius?: string;
+}
+/**
+ * CodeBlock Component Props
+ *
+ * A unified code block component supporting:
+ * - Runtime syntax highlighting via Shiki (`code` + `language`)
+ * - Build-time highlighted content from MDX/rehype-pretty-code (`children`)
+ * - Optional preview section for documentation
+ */
 export interface CodeBlockProps {
-    children?: ReactNode;
+    /**
+     * Raw code string for runtime Shiki highlighting.
+     * Mutually exclusive with `children`.
+     */
     code?: string;
+    /**
+     * Language identifier for syntax highlighting.
+     * Required when using `code` prop.
+     * @example "typescript", "tsx", "python", "bash"
+     */
     language?: string;
-    preview?: ReactNode;
+    /**
+     * Pre-highlighted content from MDX/rehype-pretty-code.
+     * Mutually exclusive with `code` prop.
+     * Language is auto-detected from `data-language` or `className="language-xxx"`.
+     */
+    children?: ReactNode;
+    /**
+     * Shiki syntax highlighting configuration.
+     * Only applies when using `code` prop (runtime highlighting).
+     */
+    shikiConfig?: ShikiConfig;
+    /**
+     * Show copy-to-clipboard button.
+     * @default true
+     */
     showCopy?: boolean;
+    /**
+     * Show language badge.
+     * @default true
+     */
     showLanguage?: boolean;
+    /**
+     * Show line numbers.
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * File path displayed above the code block.
+     * @example "src/components/Button.tsx"
+     */
     file?: string;
+    /**
+     * Enable expand/collapse for long code blocks.
+     * @default true
+     */
     collapsible?: boolean;
+    /**
+     * Height threshold (in pixels) before code is collapsed.
+     * @default 360
+     */
     collapsedHeight?: number;
+    /**
+     * Preview component displayed above the code block.
+     * Useful for showcasing component examples in documentation.
+     */
+    preview?: ReactNode;
+    /**
+     * Background style for preview section.
+     * - `"none"`: Plain card background
+     * - `"dots"`: Dotted pattern background
+     * - `string`: Image URL for custom background
+     * @default "none"
+     */
     background?: "none" | "dots" | string;
-    backgroundProps?: {
-        dotSize?: number;
-        color?: string;
-        backgroundColor?: string;
-        height?: string;
-        width?: string;
-        radius?: string;
-    };
-    lightTheme?: string;
-    darkTheme?: string;
+    /**
+     * Customization for preview background.
+     */
+    backgroundProps?: PreviewBackgroundProps;
 }
+/**
+ * Type guard for React elements with props.
+ */
+export declare function isReactElement(node: unknown): node is ReactElement;
+/**
+ * Extracts plain text content from React children.
+ * Used to get copyable code from pre-highlighted MDX content.
+ */
+export declare function extractTextFromChildren(children: ReactNode): string;
+/**
+ * Extracts language identifier from pre-highlighted MDX children.
+ * Checks `data-language` attribute and `className="language-xxx"` pattern.
+ */
+export declare function extractLanguageFromChildren(children: ReactNode): string;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/code/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErD;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEnC;;;;OAIG;IAEH,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAEtC;;OAEG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,IAAI,YAAY,CAElE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAiBnE;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAyCvE"}

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

@@ -1 +1,2 @@
+function s(r){return typeof r=="object"&&r!==null&&"props"in r&&typeof r.props=="object"}function g(r){if(typeof r=="string")return r;if(typeof r=="number")return String(r);if(!r)return"";if(Array.isArray(r))return r.map(g).join("");if(s(r)){const t=r.props;if(t.children)return g(t.children)}return""}function c(r){const t=o=>{if(!o)return null;if(s(o)){const e=o.props;if(e["data-language"])return e["data-language"];const i=e.className||e.class||"";if(typeof i=="string"){const n=i.match(/language-([\w-]+)/i);if(n)return n[1]}if(e.children)if(Array.isArray(e.children))for(const n of e.children){const a=t(n);if(a)return a}else return t(e.children)}return null};return t(r)||"text"}export{c as extractLanguageFromChildren,g as extractTextFromChildren,s as isReactElement};
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
+  "sources": ["../../../../src/components/code/types.ts"],
+  "sourcesContent": ["import type { ReactNode, ReactElement } from \"react\";\n\n/**\n * Shiki syntax highlighting configuration.\n * Controls themes and advanced highlighting options.\n */\nexport interface ShikiConfig {\n  /**\n   * Theme names for light and dark modes.\n   * Uses Shiki's dual-theme mode for automatic theme switching.\n   * @default { light: 'one-light', dark: 'one-dark-pro' }\n   */\n  themes?: {\n    light?: string;\n    dark?: string;\n  };\n\n  /**\n   * Language aliases for custom language mapping.\n   * @example { js: 'javascript', ts: 'typescript' }\n   */\n  langAlias?: Record<string, string>;\n\n  /**\n   * Shiki transformers for custom code transformations.\n   * Useful for line highlighting, diff syntax, etc.\n   * @see https://shiki.style/guide/transformers\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  transformers?: any[];\n\n  /**\n   * Metadata string passed to transformers.\n   * Often used for line highlighting syntax like `{1,3-5}`.\n   */\n  meta?: string;\n}\n\n/**\n * Background configuration for preview section.\n */\nexport interface PreviewBackgroundProps {\n  /** Dot size in pixels (for dots background) */\n  dotSize?: number;\n  /** Dot color (CSS value) */\n  color?: string;\n  /** Background color (CSS value) */\n  backgroundColor?: string;\n  /** Preview section height */\n  height?: string;\n  /** Preview section width */\n  width?: string;\n  /** Border radius token (e.g., \"3\" for var(--radius-3)) */\n  radius?: string;\n}\n\n/**\n * CodeBlock Component Props\n *\n * A unified code block component supporting:\n * - Runtime syntax highlighting via Shiki (`code` + `language`)\n * - Build-time highlighted content from MDX/rehype-pretty-code (`children`)\n * - Optional preview section for documentation\n */\nexport interface CodeBlockProps {\n  /**\n   * Raw code string for runtime Shiki highlighting.\n   * Mutually exclusive with `children`.\n   */\n  code?: string;\n\n  /**\n   * Language identifier for syntax highlighting.\n   * Required when using `code` prop.\n   * @example \"typescript\", \"tsx\", \"python\", \"bash\"\n   */\n  language?: string;\n\n  /**\n   * Pre-highlighted content from MDX/rehype-pretty-code.\n   * Mutually exclusive with `code` prop.\n   * Language is auto-detected from `data-language` or `className=\"language-xxx\"`.\n   */\n  children?: ReactNode;\n\n  /**\n   * Shiki syntax highlighting configuration.\n   * Only applies when using `code` prop (runtime highlighting).\n   */\n  shikiConfig?: ShikiConfig;\n\n  /**\n   * Show copy-to-clipboard button.\n   * @default true\n   */\n  showCopy?: boolean;\n\n  /**\n   * Show language badge.\n   * @default true\n   */\n  showLanguage?: boolean;\n\n  /**\n   * Show line numbers.\n   * @default true\n   */\n  showLineNumbers?: boolean;\n\n  /**\n   * File path displayed above the code block.\n   * @example \"src/components/Button.tsx\"\n   */\n  file?: string;\n\n  /**\n   * Enable expand/collapse for long code blocks.\n   * @default true\n   */\n  collapsible?: boolean;\n\n  /**\n   * Height threshold (in pixels) before code is collapsed.\n   * @default 360\n   */\n  collapsedHeight?: number;\n\n  /**\n   * Preview component displayed above the code block.\n   * Useful for showcasing component examples in documentation.\n   */\n  preview?: ReactNode;\n\n  /**\n   * Background style for preview section.\n   * - `\"none\"`: Plain card background\n   * - `\"dots\"`: Dotted pattern background\n   * - `string`: Image URL for custom background\n   * @default \"none\"\n   */\n  background?: \"none\" | \"dots\" | string;\n\n  /**\n   * Customization for preview background.\n   */\n  backgroundProps?: PreviewBackgroundProps;\n}\n\n/**\n * Type guard for React elements with props.\n */\nexport function isReactElement(node: unknown): node is ReactElement {\n  return typeof node === \"object\" && node !== null && \"props\" in node && typeof (node as ReactElement).props === \"object\";\n}\n\n/**\n * Extracts plain text content from React children.\n * Used to get copyable code from pre-highlighted MDX content.\n */\nexport function extractTextFromChildren(children: ReactNode): string {\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (!children) return \"\";\n\n  if (Array.isArray(children)) {\n    return children.map(extractTextFromChildren).join(\"\");\n  }\n\n  if (isReactElement(children)) {\n    const props = children.props as { children?: ReactNode };\n    if (props.children) {\n      return extractTextFromChildren(props.children);\n    }\n  }\n\n  return \"\";\n}\n\n/**\n * Extracts language identifier from pre-highlighted MDX children.\n * Checks `data-language` attribute and `className=\"language-xxx\"` pattern.\n */\nexport function extractLanguageFromChildren(children: ReactNode): string {\n  const findLanguage = (node: ReactNode): string | null => {\n    if (!node) return null;\n\n    if (isReactElement(node)) {\n      const props = node.props as {\n        \"data-language\"?: string;\n        className?: string;\n        class?: string;\n        children?: ReactNode;\n      };\n\n      // Check data-language attribute (rehype-pretty-code)\n      if (props[\"data-language\"]) {\n        return props[\"data-language\"];\n      }\n\n      // Check className for language-xxx pattern\n      const className = props.className || props.class || \"\";\n      if (typeof className === \"string\") {\n        const match = className.match(/language-([\\w-]+)/i);\n        if (match) return match[1];\n      }\n\n      // Recursively check children\n      if (props.children) {\n        if (Array.isArray(props.children)) {\n          for (const child of props.children) {\n            const lang = findLanguage(child);\n            if (lang) return lang;\n          }\n        } else {\n          return findLanguage(props.children);\n        }\n      }\n    }\n\n    return null;\n  };\n\n  return findLanguage(children) || \"text\";\n}\n"],
+  "mappings": "AAuJO,SAASA,EAAeC,EAAqC,CAClE,OAAO,OAAOA,GAAS,UAAYA,IAAS,MAAQ,UAAWA,GAAQ,OAAQA,EAAsB,OAAU,QACjH,CAMO,SAASC,EAAwBC,EAA6B,CACnE,GAAI,OAAOA,GAAa,SAAU,OAAOA,EACzC,GAAI,OAAOA,GAAa,SAAU,OAAO,OAAOA,CAAQ,EACxD,GAAI,CAACA,EAAU,MAAO,GAEtB,GAAI,MAAM,QAAQA,CAAQ,EACxB,OAAOA,EAAS,IAAID,CAAuB,EAAE,KAAK,EAAE,EAGtD,GAAIF,EAAeG,CAAQ,EAAG,CAC5B,MAAMC,EAAQD,EAAS,MACvB,GAAIC,EAAM,SACR,OAAOF,EAAwBE,EAAM,QAAQ,CAEjD,CAEA,MAAO,EACT,CAMO,SAASC,EAA4BF,EAA6B,CACvE,MAAMG,EAAgBL,GAAmC,CACvD,GAAI,CAACA,EAAM,OAAO,KAElB,GAAID,EAAeC,CAAI,EAAG,CACxB,MAAMG,EAAQH,EAAK,MAQnB,GAAIG,EAAM,eAAe,EACvB,OAAOA,EAAM,eAAe,EAI9B,MAAMG,EAAYH,EAAM,WAAaA,EAAM,OAAS,GACpD,GAAI,OAAOG,GAAc,SAAU,CACjC,MAAMC,EAAQD,EAAU,MAAM,oBAAoB,EAClD,GAAIC,EAAO,OAAOA,EAAM,CAAC,CAC3B,CAGA,GAAIJ,EAAM,SACR,GAAI,MAAM,QAAQA,EAAM,QAAQ,EAC9B,UAAWK,KAASL,EAAM,SAAU,CAClC,MAAMM,EAAOJ,EAAaG,CAAK,EAC/B,GAAIC,EAAM,OAAOA,CACnB,KAEA,QAAOJ,EAAaF,EAAM,QAAQ,CAGxC,CAEA,OAAO,IACT,EAEA,OAAOE,EAAaH,CAAQ,GAAK,MACnC",
+  "names": ["isReactElement", "node", "extractTextFromChildren", "children", "props", "extractLanguageFromChildren", "findLanguage", "className", "match", "child", "lang"]
 }

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

@@ -0,0 +1,20 @@
+interface UseCodeCardOptions {
+    code: string;
+    collapsedHeight: number;
+}
+interface UseCodeCardReturn {
+    isExpanded: boolean;
+    shouldShowToggle: boolean;
+    copied: boolean;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentMaxHeight: number;
+    handleToggle: () => void;
+    handleCopy: () => Promise<void>;
+}
+/**
+ * Shared hook for code card UI behavior.
+ * Handles expand/collapse state and copy functionality.
+ */
+export declare function useCodeCard({ code, collapsedHeight }: UseCodeCardOptions): UseCodeCardReturn;
+export {};
+//# sourceMappingURL=useCodeCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCodeCard.d.ts","sourceRoot":"","sources":["../../../../src/components/code/useCodeCard.ts"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,iBAAiB;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,kBAAkB,GAAG,iBAAiB,CA0D5F"}

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

@@ -0,0 +1,2 @@
+import{useState as r,useRef as a,useEffect as u,useCallback as d}from"react";const E=2e3;function b({code:t,collapsedHeight:o}){const[c,f]=r(!1),[s,p]=r(o),[C,i]=r(!1),n=a(null),e=a(null),g=s>o,m=c?s:o;u(()=>{n.current&&p(n.current.scrollHeight)}),u(()=>()=>{e.current&&clearTimeout(e.current)},[]);const T=d(()=>{f(l=>!l)},[]),h=d(async()=>{if(t.trim())try{await navigator.clipboard.writeText(t),i(!0),e.current&&clearTimeout(e.current),e.current=setTimeout(()=>i(!1),E)}catch{}},[t]);return{isExpanded:c,shouldShowToggle:g,copied:C,contentRef:n,contentMaxHeight:m,handleToggle:T,handleCopy:h}}export{b as useCodeCard};
+//# sourceMappingURL=useCodeCard.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/code/useCodeCard.ts"],
+  "sourcesContent": ["import { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst COPY_FEEDBACK_DURATION_MS = 2000;\n\ninterface UseCodeCardOptions {\n  code: string;\n  collapsedHeight: number;\n}\n\ninterface UseCodeCardReturn {\n  isExpanded: boolean;\n  shouldShowToggle: boolean;\n  copied: boolean;\n  contentRef: React.RefObject<HTMLDivElement | null>;\n  contentMaxHeight: number;\n  handleToggle: () => void;\n  handleCopy: () => Promise<void>;\n}\n\n/**\n * Shared hook for code card UI behavior.\n * Handles expand/collapse state and copy functionality.\n */\nexport function useCodeCard({ code, collapsedHeight }: UseCodeCardOptions): UseCodeCardReturn {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [contentHeight, setContentHeight] = useState(collapsedHeight);\n  const [copied, setCopied] = useState(false);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const shouldShowToggle = contentHeight > collapsedHeight;\n  const contentMaxHeight = isExpanded ? contentHeight : collapsedHeight;\n\n  // Measure content height on mount and when content changes\n  useEffect(() => {\n    if (contentRef.current) {\n      setContentHeight(contentRef.current.scrollHeight);\n    }\n  });\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) {\n        clearTimeout(resetTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleToggle = useCallback(() => {\n    setIsExpanded((prev) => !prev);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!code.trim()) return;\n\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n\n      if (resetTimeoutRef.current) {\n        clearTimeout(resetTimeoutRef.current);\n      }\n      resetTimeoutRef.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_DURATION_MS);\n    } catch (error) {\n      // Log error in development, fail gracefully in production\n      if (process.env.NODE_ENV === \"development\") {\n        console.error(\"[CodeBlock] Failed to copy to clipboard:\", error);\n      }\n    }\n  }, [code]);\n\n  return {\n    isExpanded,\n    shouldShowToggle,\n    copied,\n    contentRef,\n    contentMaxHeight,\n    handleToggle,\n    handleCopy,\n  };\n}\n"],
+  "mappings": "AAAA,OAAS,YAAAA,EAAU,UAAAC,EAAQ,aAAAC,EAAW,eAAAC,MAAmB,QAEzD,MAAMC,EAA4B,IAqB3B,SAASC,EAAY,CAAE,KAAAC,EAAM,gBAAAC,CAAgB,EAA0C,CAC5F,KAAM,CAACC,EAAYC,CAAa,EAAIT,EAAS,EAAK,EAC5C,CAACU,EAAeC,CAAgB,EAAIX,EAASO,CAAe,EAC5D,CAACK,EAAQC,CAAS,EAAIb,EAAS,EAAK,EACpCc,EAAab,EAA8B,IAAI,EAC/Cc,EAAkBd,EAA6C,IAAI,EAEnEe,EAAmBN,EAAgBH,EACnCU,EAAmBT,EAAaE,EAAgBH,EAGtDL,EAAU,IAAM,CACVY,EAAW,SACbH,EAAiBG,EAAW,QAAQ,YAAY,CAEpD,CAAC,EAGDZ,EAAU,IACD,IAAM,CACPa,EAAgB,SAClB,aAAaA,EAAgB,OAAO,CAExC,EACC,CAAC,CAAC,EAEL,MAAMG,EAAef,EAAY,IAAM,CACrCM,EAAeU,GAAS,CAACA,CAAI,CAC/B,EAAG,CAAC,CAAC,EAECC,EAAajB,EAAY,SAAY,CACzC,GAAKG,EAAK,KAAK,EAEf,GAAI,CACF,MAAM,UAAU,UAAU,UAAUA,CAAI,EACxCO,EAAU,EAAI,EAEVE,EAAgB,SAClB,aAAaA,EAAgB,OAAO,EAEtCA,EAAgB,QAAU,WAAW,IAAMF,EAAU,EAAK,EAAGT,CAAyB,CACxF,MAAgB,CAKhB,CACF,EAAG,CAACE,CAAI,CAAC,EAET,MAAO,CACL,WAAAE,EACA,iBAAAQ,EACA,OAAAJ,EACA,WAAAE,EACA,iBAAAG,EACA,aAAAC,EACA,WAAAE,CACF,CACF",
+  "names": ["useState", "useRef", "useEffect", "useCallback", "COPY_FEEDBACK_DURATION_MS", "useCodeCard", "code", "collapsedHeight", "isExpanded", "setIsExpanded", "contentHeight", "setContentHeight", "copied", "setCopied", "contentRef", "resetTimeoutRef", "shouldShowToggle", "contentMaxHeight", "handleToggle", "prev", "handleCopy"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-blocks",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"