@kushagradhawan/kookie-blocks 0.1.17 → 0.1.19

package/dist/esm/components/docs/docs-page.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/docs-page.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { Flex, Box, Separator, Container, Text, Link } from '@kushagradhawan/kookie-ui';\nimport { DocsPageHeader } from './docs-page-header.js';\nimport type { DocsPageMeta } from './types.js';\n\nexport interface DocsPageProps {\n  children: React.ReactNode;\n  /** Page metadata for header */\n  meta?: DocsPageMeta;\n  /** Optional table of contents element */\n  tableOfContents?: React.ReactNode;\n  /** Content max width */\n  maxWidth?: string | number;\n  /** Page padding */\n  padding?: '3' | '4' | '5' | '6' | '7' | '8' | '9';\n  /** Optional header actions */\n  headerActions?: React.ReactNode;\n  /** Custom header element (overrides meta-based header) */\n  header?: React.ReactNode;\n  /** Show footer with copyright */\n  showFooter?: boolean;\n  /** Footer copyright holder */\n  footerCopyright?: {\n    name: string;\n    url?: string;\n  };\n  /** GitHub repo URL for footer */\n  githubUrl?: string;\n}\n\nexport function DocsPage({\n  children,\n  meta,\n  tableOfContents,\n  maxWidth = '48rem',\n  padding = '6',\n  headerActions,\n  header,\n  showFooter = false,\n  footerCopyright,\n  githubUrl,\n}: DocsPageProps) {\n  const currentYear = new Date().getFullYear();\n  const showHeader = header || meta;\n\n  return (\n    <Flex my=\"6\" gap={{ initial: '6', md: '6' }} align=\"start\" direction={{ initial: 'column', lg: 'row' }}>\n      {/* Main content area */}\n      <Flex direction=\"column\" gap=\"6\" p={{ initial: '2', sm: '4' }} flexGrow=\"1\" style={{ minWidth: 0 }}>\n        <Container size=\"2\" style={{ minWidth: 0 }} data-content-area>\n          <Box p=\"4\" width=\"100%\">\n            <Flex direction=\"column\" gap=\"8\" width=\"100%\">\n              {/* Page Header */}\n              {header ? header : meta && <DocsPageHeader meta={meta} actions={headerActions} />}\n\n              {showHeader && <Separator size=\"4\" />}\n\n              <Flex direction=\"column\" gap=\"0\" width=\"100%\">\n                {children}\n              </Flex>\n            </Flex>\n\n            {showFooter && (\n              <Flex align=\"center\" justify=\"center\" width=\"100%\" pt=\"8\">\n                <Text size=\"2\" color=\"gray\" align=\"center\">\n                  \u00A9 {currentYear}{' '}\n                  {footerCopyright?.url ? (\n                    <Link href={footerCopyright.url} target=\"_blank\" rel=\"noreferrer\">\n                      {footerCopyright.name}\n                    </Link>\n                  ) : (\n                    footerCopyright?.name || 'Your Company'\n                  )}\n                  . Licensed under MIT.\n                  {githubUrl && (\n                    <>\n                      {' '}\n                      <Link href={githubUrl} target=\"_blank\" rel=\"noreferrer\">\n                        GitHub\n                      </Link>\n                      .\n                    </>\n                  )}\n                </Text>\n              </Flex>\n            )}\n          </Box>\n        </Container>\n      </Flex>\n\n      {/* Table of Contents */}\n      {tableOfContents && (\n        <Box style={{ width: '240px', minWidth: '160px' }} position=\"sticky\" top=\"200px\" display={{ initial: 'none', lg: 'block' }}>\n          {tableOfContents}\n        </Box>\n      )}\n    </Flex>\n  );\n}\n"],
+  "mappings": "AAAA,OAAOA,MAAW,QAClB,OAAS,QAAAC,EAAM,OAAAC,EAAK,aAAAC,EAAW,aAAAC,EAAW,QAAAC,EAAM,QAAAC,MAAY,4BAC5D,OAAS,kBAAAC,MAAsB,wBA4BxB,SAASC,EAAS,CACvB,SAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,SAAAC,EAAW,QACX,QAAAC,EAAU,IACV,cAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,GACb,gBAAAC,EACA,UAAAC,CACF,EAAkB,CAChB,MAAMC,EAAc,IAAI,KAAK,EAAE,YAAY,EAG3C,OACEnB,EAAA,cAACC,EAAA,CAAK,GAAG,IAAI,IAAK,CAAE,QAAS,IAAK,GAAI,GAAI,EAAG,MAAM,QAAQ,UAAW,CAAE,QAAS,SAAU,GAAI,KAAM,GAEnGD,EAAA,cAACC,EAAA,CAAK,UAAU,SAAS,IAAI,IAAI,EAAG,CAAE,QAAS,IAAK,GAAI,GAAI,EAAG,SAAS,IAAI,MAAO,CAAE,SAAU,CAAE,GAC/FD,EAAA,cAACI,EAAA,CAAU,KAAK,IAAI,MAAO,CAAE,SAAU,CAAE,EAAG,oBAAiB,IAC3DJ,EAAA,cAACE,EAAA,CAAI,EAAE,IAAI,MAAM,QACfF,EAAA,cAACC,EAAA,CAAK,UAAU,SAAS,IAAI,IAAI,MAAM,QAEpCc,GAAkBL,GAAQV,EAAA,cAACO,EAAA,CAAe,KAAMG,EAAM,QAASI,EAAe,GAVxEC,GAAUL,IAYFV,EAAA,cAACG,EAAA,CAAU,KAAK,IAAI,EAEnCH,EAAA,cAACC,EAAA,CAAK,UAAU,SAAS,IAAI,IAAI,MAAM,QACpCQ,CACH,CACF,EAECO,GACChB,EAAA,cAACC,EAAA,CAAK,MAAM,SAAS,QAAQ,SAAS,MAAM,OAAO,GAAG,KACpDD,EAAA,cAACK,EAAA,CAAK,KAAK,IAAI,MAAM,OAAO,MAAM,UAAS,QACtCc,EAAa,IACfF,GAAiB,IAChBjB,EAAA,cAACM,EAAA,CAAK,KAAMW,EAAgB,IAAK,OAAO,SAAS,IAAI,cAClDA,EAAgB,IACnB,EAEAA,GAAiB,MAAQ,eACzB,wBAEDC,GACClB,EAAA,cAAAA,EAAA,cACG,IACDA,EAAA,cAACM,EAAA,CAAK,KAAMY,EAAW,OAAO,SAAS,IAAI,cAAa,QAExD,EAAO,GAET,CAEJ,CACF,CAEJ,CACF,CACF,EAGCP,GACCX,EAAA,cAACE,EAAA,CAAI,MAAO,CAAE,MAAO,QAAS,SAAU,OAAQ,EAAG,SAAS,SAAS,IAAI,QAAQ,QAAS,CAAE,QAAS,OAAQ,GAAI,OAAQ,GACtHS,CACH,CAEJ,CAEJ",
+  "names": ["React", "Flex", "Box", "Separator", "Container", "Text", "Link", "DocsPageHeader", "DocsPage", "children", "meta", "tableOfContents", "maxWidth", "padding", "headerActions", "header", "showFooter", "footerCopyright", "githubUrl", "currentYear"]
+}

package/dist/esm/components/docs/docs-shell.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { DocsNavigationConfig, DocsLogoConfig } from './types.js';
+export interface DocsShellProps {
+    children: React.ReactNode;
+    /** Navigation configuration */
+    navigation: DocsNavigationConfig;
+    /** Logo configuration */
+    logo?: DocsLogoConfig;
+    /** Optional header actions (dark mode toggle, github link, etc.) */
+    headerActions?: React.ReactNode;
+    /** Optional sidebar footer content */
+    sidebarFooter?: React.ReactNode;
+    /** Shell height */
+    height?: 'full' | 'auto' | string | number;
+    /** Sidebar thin size (when collapsed) */
+    sidebarThinSize?: number;
+    /** Whether sidebar is resizable */
+    sidebarResizable?: boolean;
+    /** Mobile trigger icon */
+    mobileTriggerIcon?: React.ReactNode;
+    /** Current pathname for active state detection */
+    pathname?: string;
+    /** Link component to use (defaults to 'a') */
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        prefetch?: boolean;
+        'aria-label'?: string;
+    }>;
+}
+export declare function DocsShell({ children, navigation, logo, headerActions, sidebarFooter, height, sidebarThinSize, sidebarResizable, mobileTriggerIcon, pathname, linkComponent, }: DocsShellProps): React.JSX.Element;
+//# sourceMappingURL=docs-shell.d.ts.map

package/dist/esm/components/docs/docs-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/docs-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvE,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+BAA+B;IAC/B,UAAU,EAAE,oBAAoB,CAAC;IACjC,yBAAyB;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,oEAAoE;IACpE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,sCAAsC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7H;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,aAAa,EACb,aAAa,EACb,MAAM,EACN,eAAoB,EACpB,gBAAuB,EACvB,iBAAiB,EACjB,QAAa,EACb,aAAa,GACd,EAAE,cAAc,qBAsEhB"}

package/dist/esm/components/docs/docs-shell.js

@@ -0,0 +1,2 @@
+"use client";import e,{useState as b}from"react";import{Shell as o,Flex as i,IconButton as x}from"@kushagradhawan/kookie-ui";import{DocsSidebar as C}from"./docs-sidebar.js";function w({children:r,navigation:a,logo:l,headerActions:t,sidebarFooter:n,height:s,sidebarThinSize:g=80,sidebarResizable:h=!0,mobileTriggerIcon:d,pathname:p="",linkComponent:c}){const[f,m]=b("expanded"),u=n||t?e.createElement(i,{gap:"2",align:"center"},t,n):void 0;return e.createElement(o.Root,{height:s},e.createElement(o.Sidebar,{toggleModes:"single",thinSize:g,resizable:h,defaultState:{initial:"collapsed",sm:"expanded"},onStateChange:S=>m(S==="thin"?"thin":"expanded"),presentation:{initial:"overlay",sm:"fixed"}},e.createElement(C,{navigation:a,logo:l,presentation:f,footer:u,pathname:p,linkComponent:c})),e.createElement(o.Content,null,e.createElement(i,{display:{initial:"flex",sm:"none"},position:"fixed",top:"4",left:"4",align:"center",justify:"center",width:"auto",height:"auto",style:{zIndex:999}},e.createElement(x,{variant:"ghost",size:"3",highContrast:!0,color:"gray",asChild:!0},e.createElement(o.Trigger,{target:"sidebar"},d||e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M2 4h12M2 8h12M2 12h12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}))))),r))}export{w as DocsShell};
+//# sourceMappingURL=docs-shell.js.map

package/dist/esm/components/docs/docs-shell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/docs-shell.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React, { useState } from 'react';\nimport { Shell, Flex, IconButton } from '@kushagradhawan/kookie-ui';\nimport { DocsSidebar } from './docs-sidebar.js';\nimport type { DocsNavigationConfig, DocsLogoConfig } from './types.js';\n\nexport interface DocsShellProps {\n  children: React.ReactNode;\n  /** Navigation configuration */\n  navigation: DocsNavigationConfig;\n  /** Logo configuration */\n  logo?: DocsLogoConfig;\n  /** Optional header actions (dark mode toggle, github link, etc.) */\n  headerActions?: React.ReactNode;\n  /** Optional sidebar footer content */\n  sidebarFooter?: React.ReactNode;\n  /** Shell height */\n  height?: 'full' | 'auto' | string | number;\n  /** Sidebar thin size (when collapsed) */\n  sidebarThinSize?: number;\n  /** Whether sidebar is resizable */\n  sidebarResizable?: boolean;\n  /** Mobile trigger icon */\n  mobileTriggerIcon?: React.ReactNode;\n  /** Current pathname for active state detection */\n  pathname?: string;\n  /** Link component to use (defaults to 'a') */\n  linkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; prefetch?: boolean; 'aria-label'?: string }>;\n}\n\nexport function DocsShell({\n  children,\n  navigation,\n  logo,\n  headerActions,\n  sidebarFooter,\n  height,\n  sidebarThinSize = 80,\n  sidebarResizable = true,\n  mobileTriggerIcon,\n  pathname = '',\n  linkComponent,\n}: DocsShellProps) {\n  const [sidebarPresentation, setSidebarPresentation] = useState<'thin' | 'expanded'>('expanded');\n\n  // Combine headerActions with sidebarFooter\n  const footerContent = sidebarFooter || headerActions ? (\n    <Flex gap=\"2\" align=\"center\">\n      {headerActions}\n      {sidebarFooter}\n    </Flex>\n  ) : undefined;\n\n  return (\n    <Shell.Root height={height}>\n      <Shell.Sidebar\n        toggleModes=\"single\"\n        thinSize={sidebarThinSize}\n        resizable={sidebarResizable}\n        defaultState={{ initial: 'collapsed', sm: 'expanded' }}\n        onStateChange={(state) => setSidebarPresentation(state === 'thin' ? 'thin' : 'expanded')}\n        presentation={{ initial: 'overlay', sm: 'fixed' }}\n      >\n        <DocsSidebar\n          navigation={navigation}\n          logo={logo}\n          presentation={sidebarPresentation}\n          footer={footerContent}\n          pathname={pathname}\n          linkComponent={linkComponent}\n        />\n      </Shell.Sidebar>\n\n      <Shell.Content>\n        {/* Mobile trigger */}\n        <Flex\n          display={{ initial: 'flex', sm: 'none' }}\n          position=\"fixed\"\n          top=\"4\"\n          left=\"4\"\n          align=\"center\"\n          justify=\"center\"\n          width=\"auto\"\n          height=\"auto\"\n          style={{ zIndex: 999 }}\n        >\n          <IconButton variant=\"ghost\" size=\"3\" highContrast color=\"gray\" asChild>\n            <Shell.Trigger target=\"sidebar\">\n              {mobileTriggerIcon || (\n                <svg\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M2 4h12M2 8h12M2 12h12\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.5\"\n                    strokeLinecap=\"round\"\n                  />\n                </svg>\n              )}\n            </Shell.Trigger>\n          </IconButton>\n        </Flex>\n\n        {children}\n      </Shell.Content>\n    </Shell.Root>\n  );\n}\n"],
+  "mappings": "aAEA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAS,SAAAC,EAAO,QAAAC,EAAM,cAAAC,MAAkB,4BACxC,OAAS,eAAAC,MAAmB,oBA2BrB,SAASC,EAAU,CACxB,SAAAC,EACA,WAAAC,EACA,KAAAC,EACA,cAAAC,EACA,cAAAC,EACA,OAAAC,EACA,gBAAAC,EAAkB,GAClB,iBAAAC,EAAmB,GACnB,kBAAAC,EACA,SAAAC,EAAW,GACX,cAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAqBC,CAAsB,EAAIlB,EAA8B,UAAU,EAGxFmB,EAAgBT,GAAiBD,EACrCV,EAAA,cAACG,EAAA,CAAK,IAAI,IAAI,MAAM,UACjBO,EACAC,CACH,EACE,OAEJ,OACEX,EAAA,cAACE,EAAM,KAAN,CAAW,OAAQU,GAClBZ,EAAA,cAACE,EAAM,QAAN,CACC,YAAY,SACZ,SAAUW,EACV,UAAWC,EACX,aAAc,CAAE,QAAS,YAAa,GAAI,UAAW,EACrD,cAAgBO,GAAUF,EAAuBE,IAAU,OAAS,OAAS,UAAU,EACvF,aAAc,CAAE,QAAS,UAAW,GAAI,OAAQ,GAEhDrB,EAAA,cAACK,EAAA,CACC,WAAYG,EACZ,KAAMC,EACN,aAAcS,EACd,OAAQE,EACR,SAAUJ,EACV,cAAeC,EACjB,CACF,EAEAjB,EAAA,cAACE,EAAM,QAAN,KAECF,EAAA,cAACG,EAAA,CACC,QAAS,CAAE,QAAS,OAAQ,GAAI,MAAO,EACvC,SAAS,QACT,IAAI,IACJ,KAAK,IACL,MAAM,SACN,QAAQ,SACR,MAAM,OACN,OAAO,OACP,MAAO,CAAE,OAAQ,GAAI,GAErBH,EAAA,cAACI,EAAA,CAAW,QAAQ,QAAQ,KAAK,IAAI,aAAY,GAAC,MAAM,OAAO,QAAO,IACpEJ,EAAA,cAACE,EAAM,QAAN,CAAc,OAAO,WACnBa,GACCf,EAAA,cAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,8BAENA,EAAA,cAAC,QACC,EAAE,yBACF,OAAO,eACP,YAAY,MACZ,cAAc,QAChB,CACF,CAEJ,CACF,CACF,EAECO,CACH,CACF,CAEJ",
+  "names": ["React", "useState", "Shell", "Flex", "IconButton", "DocsSidebar", "DocsShell", "children", "navigation", "logo", "headerActions", "sidebarFooter", "height", "sidebarThinSize", "sidebarResizable", "mobileTriggerIcon", "pathname", "linkComponent", "sidebarPresentation", "setSidebarPresentation", "footerContent", "state"]
+}

package/dist/esm/components/docs/docs-sidebar.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { DocsNavigationConfig, DocsLogoConfig } from './types.js';
+type AccentColor = 'gray' | 'gold' | 'bronze' | 'brown' | 'yellow' | 'amber' | 'orange' | 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'lime' | 'mint' | 'sky';
+export interface DocsSidebarProps {
+    /** Navigation configuration */
+    navigation: DocsNavigationConfig;
+    /** Logo configuration */
+    logo?: DocsLogoConfig;
+    /** Presentation mode from parent Shell */
+    presentation?: 'thin' | 'expanded';
+    /** Footer content */
+    footer?: React.ReactNode;
+    /** Sidebar size */
+    size?: '1' | '2';
+    /** Sidebar variant */
+    variant?: 'soft' | 'outline' | 'surface' | 'ghost';
+    /** Menu item variant */
+    menuVariant?: 'solid' | 'soft';
+    /** Accent color */
+    color?: AccentColor;
+    /** Current pathname for active state detection */
+    pathname?: string;
+    /** Link component to use (defaults to 'a') */
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        prefetch?: boolean;
+        'aria-label'?: string;
+    }>;
+}
+export declare function DocsSidebar({ navigation, logo, presentation, footer, size, variant, menuVariant, color, pathname, linkComponent: LinkComponent, }: DocsSidebarProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=docs-sidebar.d.ts.map

package/dist/esm/components/docs/docs-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/docs-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKvE,KAAK,WAAW,GACZ,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,KAAK,CAAC;AAEV,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,UAAU,EAAE,oBAAoB,CAAC;IACjC,yBAAyB;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,sBAAsB;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7H;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,IAAI,EACJ,YAAyB,EACzB,MAAM,EACN,IAAU,EACV,OAAgB,EAChB,WAAoB,EACpB,KAAc,EACd,QAAa,EACb,aAAa,EAAE,aAA0B,GAC1C,EAAE,gBAAgB,qBA2GlB"}

package/dist/esm/components/docs/docs-sidebar.js

@@ -0,0 +1,2 @@
+"use client";import e,{isValidElement as C}from"react";import{Sidebar as r,Flex as b,Avatar as M}from"@kushagradhawan/kookie-ui";import{HugeiconsIcon as v}from"@hugeicons/react";function I({navigation:p,logo:i,presentation:f="expanded",footer:u,size:g="2",variant:c="soft",menuVariant:S="soft",color:m="gray",pathname:a="",linkComponent:s="a"}){const y=n=>Array.isArray(n)&&n.length>0&&Array.isArray(n[0]),l=n=>n?C(n)?n:y(n)?e.createElement(v,{icon:n,size:16}):typeof n=="function"?e.createElement(n,null):null:null;return e.createElement(r.Root,{size:g,variant:c,color:m,menuVariant:S,presentation:f},i&&e.createElement(r.Header,null,e.createElement(b,{justify:"between",align:"center",width:"100%"},e.createElement(s,{href:i.href||"/","aria-label":i.alt||"Home"},e.createElement(b,{align:"center",gap:"2"},e.createElement(M,{fallback:i.alt?.[0]||"K",size:"2",src:i.src}))))),e.createElement(r.Content,null,e.createElement(r.Menu,null,p.groups.map(n=>e.createElement(r.Group,{key:n.label},e.createElement(r.GroupLabel,null,n.label),e.createElement(r.GroupContent,null,n.items.map(o=>{const d=o.items&&o.items.length>0,h=d?o.items.some(t=>a===t.href):!1;return d?e.createElement(r.MenuItem,{key:o.href},e.createElement(r.MenuSub,{defaultOpen:h},e.createElement(r.MenuSubTrigger,null,l(o.icon),o.title),e.createElement(r.MenuSubContent,null,o.items.map(t=>e.createElement(r.MenuButton,{asChild:!0,key:t.href,isActive:a===t.href},e.createElement(s,{href:t.href},l(t.icon),e.createElement("span",{className:"rt-SidebarMenuLabel"},t.title))))))):e.createElement(r.MenuItem,{key:o.href},e.createElement(r.MenuButton,{asChild:!0,isActive:a===o.href,badge:o.badge},e.createElement(s,{href:o.href},l(o.icon),e.createElement("span",{className:"rt-SidebarMenuLabel"},o.title))))})))))),u&&e.createElement(r.Footer,null,u))}export{I as DocsSidebar};
+//# sourceMappingURL=docs-sidebar.js.map

package/dist/esm/components/docs/docs-sidebar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/docs-sidebar.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React, { isValidElement } from 'react';\nimport { Sidebar, Flex, Avatar } from '@kushagradhawan/kookie-ui';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport type { DocsNavigationConfig, DocsLogoConfig } from './types.js';\n\n// HugeIcons IconSvgObject type - readonly array of tuples with tag name and attributes\ntype IconSvgObject = readonly (readonly [string, { readonly [key: string]: string | number }])[];\n\ntype AccentColor =\n  | 'gray'\n  | 'gold'\n  | 'bronze'\n  | 'brown'\n  | 'yellow'\n  | 'amber'\n  | 'orange'\n  | 'tomato'\n  | 'red'\n  | 'ruby'\n  | 'crimson'\n  | 'pink'\n  | 'plum'\n  | 'purple'\n  | 'violet'\n  | 'iris'\n  | 'indigo'\n  | 'blue'\n  | 'cyan'\n  | 'teal'\n  | 'jade'\n  | 'green'\n  | 'grass'\n  | 'lime'\n  | 'mint'\n  | 'sky';\n\nexport interface DocsSidebarProps {\n  /** Navigation configuration */\n  navigation: DocsNavigationConfig;\n  /** Logo configuration */\n  logo?: DocsLogoConfig;\n  /** Presentation mode from parent Shell */\n  presentation?: 'thin' | 'expanded';\n  /** Footer content */\n  footer?: React.ReactNode;\n  /** Sidebar size */\n  size?: '1' | '2';\n  /** Sidebar variant */\n  variant?: 'soft' | 'outline' | 'surface' | 'ghost';\n  /** Menu item variant */\n  menuVariant?: 'solid' | 'soft';\n  /** Accent color */\n  color?: AccentColor;\n  /** Current pathname for active state detection */\n  pathname?: string;\n  /** Link component to use (defaults to 'a') */\n  linkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; prefetch?: boolean; 'aria-label'?: string }>;\n}\n\nexport function DocsSidebar({\n  navigation,\n  logo,\n  presentation = 'expanded',\n  footer,\n  size = '2',\n  variant = 'soft',\n  menuVariant = 'soft',\n  color = 'gray',\n  pathname = '',\n  linkComponent: LinkComponent = 'a' as any,\n}: DocsSidebarProps) {\n\n  // Helper to check if icon is HugeIcons IconSvgObject format\n  const isIconSvgObject = (icon: unknown): icon is IconSvgObject => {\n    return Array.isArray(icon) && icon.length > 0 && Array.isArray(icon[0]);\n  };\n\n  // Helper to render icon\n  const renderIcon = (icon: React.ComponentType<{ className?: string }> | React.ReactNode | IconSvgObject) => {\n    if (!icon) return null;\n    if (isValidElement(icon)) return icon;\n    // Handle HugeIcons IconSvgObject format\n    if (isIconSvgObject(icon)) {\n      return <HugeiconsIcon icon={icon} size={16} />;\n    }\n    if (typeof icon === 'function') {\n      const IconComponent = icon as React.ComponentType<{ className?: string }>;\n      return <IconComponent />;\n    }\n    return null;\n  };\n\n  return (\n    <Sidebar.Root\n      size={size}\n      variant={variant}\n      color={color}\n      menuVariant={menuVariant}\n      presentation={presentation}\n    >\n      {logo && (\n        <Sidebar.Header>\n          <Flex justify=\"between\" align=\"center\" width=\"100%\">\n            <LinkComponent href={logo.href || '/'} aria-label={logo.alt || 'Home'}>\n              <Flex align=\"center\" gap=\"2\">\n                <Avatar fallback={logo.alt?.[0] || 'K'} size=\"2\" src={logo.src} />\n              </Flex>\n            </LinkComponent>\n          </Flex>\n        </Sidebar.Header>\n      )}\n\n      <Sidebar.Content>\n        <Sidebar.Menu>\n          {navigation.groups.map((group) => (\n            <Sidebar.Group key={group.label}>\n              <Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                {group.items.map((item) => {\n                  // Check if this item or any nested item is active\n                  const hasNestedItems = item.items && item.items.length > 0;\n                  const isNestedActive = hasNestedItems\n                    ? item.items!.some((subItem) => pathname === subItem.href)\n                    : false;\n\n                  if (hasNestedItems) {\n                    return (\n                      <Sidebar.MenuItem key={item.href}>\n                        <Sidebar.MenuSub defaultOpen={isNestedActive}>\n                          <Sidebar.MenuSubTrigger>\n                            {renderIcon(item.icon)}\n                            {item.title}\n                          </Sidebar.MenuSubTrigger>\n                          <Sidebar.MenuSubContent>\n                            {item.items!.map((subItem) => (\n                              <Sidebar.MenuButton\n                                asChild\n                                key={subItem.href}\n                                isActive={pathname === subItem.href}\n                              >\n                                <LinkComponent href={subItem.href}>\n                                  {renderIcon(subItem.icon)}\n                                  <span className=\"rt-SidebarMenuLabel\">{subItem.title}</span>\n                                </LinkComponent>\n                              </Sidebar.MenuButton>\n                            ))}\n                          </Sidebar.MenuSubContent>\n                        </Sidebar.MenuSub>\n                      </Sidebar.MenuItem>\n                    );\n                  }\n\n                  // Regular menu item\n                  return (\n                    <Sidebar.MenuItem key={item.href}>\n                      <Sidebar.MenuButton\n                        asChild\n                        isActive={pathname === item.href}\n                        badge={item.badge}\n                      >\n                        <LinkComponent href={item.href}>\n                          {renderIcon(item.icon)}\n                          <span className=\"rt-SidebarMenuLabel\">{item.title}</span>\n                        </LinkComponent>\n                      </Sidebar.MenuButton>\n                    </Sidebar.MenuItem>\n                  );\n                })}\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n          ))}\n        </Sidebar.Menu>\n      </Sidebar.Content>\n\n      {footer && <Sidebar.Footer>{footer}</Sidebar.Footer>}\n    </Sidebar.Root>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["React", "isValidElement", "Sidebar", "Flex", "Avatar", "HugeiconsIcon", "DocsSidebar", "navigation", "logo", "presentation", "footer", "size", "variant", "menuVariant", "color", "pathname", "LinkComponent", "isIconSvgObject", "icon", "renderIcon", "group", "item", "hasNestedItems", "isNestedActive", "subItem"]
+}

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

@@ -0,0 +1,8 @@
+export type { DocsNavigationItem, DocsNavigationGroup, DocsNavigationConfig, DocsPageMeta, DocsLogoConfig, TocItem, } from './types.js';
+export { TableOfContents } from './table-of-contents.js';
+export { DocsSidebar } from './docs-sidebar.js';
+export { DocsPageHeader } from './docs-page-header.js';
+export { DocsPage } from './docs-page.js';
+export { DocsShell } from './docs-shell.js';
+export { PreviewBlock } from './preview-block.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,OAAO,GACR,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1,2 @@
+import{TableOfContents as r}from"./table-of-contents.js";import{DocsSidebar as a}from"./docs-sidebar.js";import{DocsPageHeader as c}from"./docs-page-header.js";import{DocsPage as i}from"./docs-page.js";import{DocsShell as g}from"./docs-shell.js";import{PreviewBlock as D}from"./preview-block.js";export{i as DocsPage,c as DocsPageHeader,g as DocsShell,a as DocsSidebar,D as PreviewBlock,r as TableOfContents};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/index.ts"],
+  "sourcesContent": ["// Types\nexport type {\n  DocsNavigationItem,\n  DocsNavigationGroup,\n  DocsNavigationConfig,\n  DocsPageMeta,\n  DocsLogoConfig,\n  TocItem,\n} from './types.js';\n\n// Components\nexport { TableOfContents } from './table-of-contents.js';\nexport { DocsSidebar } from './docs-sidebar.js';\nexport { DocsPageHeader } from './docs-page-header.js';\nexport { DocsPage } from './docs-page.js';\nexport { DocsShell } from './docs-shell.js';\nexport { PreviewBlock } from './preview-block.js';\n"],
+  "mappings": "AAWA,OAAS,mBAAAA,MAAuB,yBAChC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,wBAC/B,OAAS,YAAAC,MAAgB,iBACzB,OAAS,aAAAC,MAAiB,kBAC1B,OAAS,gBAAAC,MAAoB",
+  "names": ["TableOfContents", "DocsSidebar", "DocsPageHeader", "DocsPage", "DocsShell", "PreviewBlock"]
+}

package/dist/esm/components/docs/preview-block.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ReactNode } from "react";
+export interface PreviewBlockProps {
+    children: ReactNode;
+    /** Background style for the preview */
+    background?: "none" | "dots" | "grid";
+}
+/**
+ * PreviewBlock - displays a live preview of a component
+ *
+ * Use this component to showcase live examples of components in documentation.
+ * Shows only the rendered component, not the code.
+ *
+ * @example
+ * ```tsx
+ * <PreviewBlock background="dots">
+ *   <Button>Example Button</Button>
+ * </PreviewBlock>
+ * ```
+ */
+export declare function PreviewBlock({ children, background, }: PreviewBlockProps): React.JSX.Element;
+//# sourceMappingURL=preview-block.d.ts.map

package/dist/esm/components/docs/preview-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-block.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/preview-block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CACvC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,UAAmB,GACpB,EAAE,iBAAiB,qBAmCnB"}

package/dist/esm/components/docs/preview-block.js

@@ -0,0 +1,2 @@
+"use client";import r from"react";import{Box as n,Card as o,Flex as t,Theme as i}from"@kushagradhawan/kookie-ui";function p({children:a,background:e="dots"}){return r.createElement(n,{my:"3"},r.createElement(o,{size:"1",variant:"soft"},r.createElement(t,{justify:"center",align:"center",py:"4",minHeight:"240px",style:e==="dots"?{backgroundImage:"radial-gradient(circle, var(--gray-6) 1px, transparent 1px)",backgroundSize:"24px 24px",backgroundPosition:"center",backgroundColor:"var(--gray-2)"}:e==="grid"?{backgroundImage:"linear-gradient(var(--gray-6) 1px, transparent 1px), linear-gradient(90deg, var(--gray-6) 1px, transparent 1px)",backgroundSize:"24px 24px",backgroundPosition:"center",backgroundColor:"var(--gray-2)"}:void 0},r.createElement(i,{fontFamily:"sans"},a))))}export{p as PreviewBlock};
+//# sourceMappingURL=preview-block.js.map

package/dist/esm/components/docs/preview-block.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/preview-block.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport React from \"react\";\nimport { Box, Card, Flex, Theme } from \"@kushagradhawan/kookie-ui\";\nimport type { ReactNode } from \"react\";\n\nexport interface PreviewBlockProps {\n  children: ReactNode;\n  /** Background style for the preview */\n  background?: \"none\" | \"dots\" | \"grid\";\n}\n\n/**\n * PreviewBlock - displays a live preview of a component\n *\n * Use this component to showcase live examples of components in documentation.\n * Shows only the rendered component, not the code.\n *\n * @example\n * ```tsx\n * <PreviewBlock background=\"dots\">\n *   <Button>Example Button</Button>\n * </PreviewBlock>\n * ```\n */\nexport function PreviewBlock({\n  children,\n  background = \"dots\",\n}: PreviewBlockProps) {\n  const backgroundStyle =\n    background === \"dots\"\n      ? {\n          backgroundImage:\n            \"radial-gradient(circle, var(--gray-6) 1px, transparent 1px)\",\n          backgroundSize: \"24px 24px\",\n          backgroundPosition: \"center\",\n          backgroundColor: \"var(--gray-2)\",\n        }\n      : background === \"grid\"\n        ? {\n            backgroundImage:\n              \"linear-gradient(var(--gray-6) 1px, transparent 1px), linear-gradient(90deg, var(--gray-6) 1px, transparent 1px)\",\n            backgroundSize: \"24px 24px\",\n            backgroundPosition: \"center\",\n            backgroundColor: \"var(--gray-2)\",\n          }\n        : undefined;\n\n  return (\n    <Box my=\"3\">\n      <Card size=\"1\" variant=\"soft\">\n        <Flex\n          justify=\"center\"\n          align=\"center\"\n          py=\"4\"\n          minHeight=\"240px\"\n          style={backgroundStyle}\n        >\n          <Theme fontFamily=\"sans\">{children}</Theme>\n        </Flex>\n      </Card>\n    </Box>\n  );\n}\n"],
+  "mappings": "aAEA,OAAOA,MAAW,QAClB,OAAS,OAAAC,EAAK,QAAAC,EAAM,QAAAC,EAAM,SAAAC,MAAa,4BAsBhC,SAASC,EAAa,CAC3B,SAAAC,EACA,WAAAC,EAAa,MACf,EAAsB,CAoBpB,OACEP,EAAA,cAACC,EAAA,CAAI,GAAG,KACND,EAAA,cAACE,EAAA,CAAK,KAAK,IAAI,QAAQ,QACrBF,EAAA,cAACG,EAAA,CACC,QAAQ,SACR,MAAM,SACN,GAAG,IACH,UAAU,QACV,MA1BNI,IAAe,OACX,CACE,gBACE,8DACF,eAAgB,YAChB,mBAAoB,SACpB,gBAAiB,eACnB,EACAA,IAAe,OACb,CACE,gBACE,kHACF,eAAgB,YAChB,mBAAoB,SACpB,gBAAiB,eACnB,EACA,QAYAP,EAAA,cAACI,EAAA,CAAM,WAAW,QAAQE,CAAS,CACrC,CACF,CACF,CAEJ",
+  "names": ["React", "Box", "Card", "Flex", "Theme", "PreviewBlock", "children", "background"]
+}

package/dist/esm/components/docs/table-of-contents.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface TableOfContentsProps {
+    className?: string;
+    /** Heading levels to include (default: [2]) */
+    levels?: number[];
+    /** Title shown above TOC (default: "On this page") */
+    title?: string;
+    /** Optional wrapper for the TOC content */
+    renderContainer?: (tocContent: React.ReactNode) => React.ReactNode | null;
+}
+export declare const TableOfContents: React.NamedExoticComponent<TableOfContentsProps>;
+//# sourceMappingURL=table-of-contents.d.ts.map

package/dist/esm/components/docs/table-of-contents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/table-of-contents.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAa9E,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;CAC3E;AAED,eAAO,MAAM,eAAe,kDAmI1B,CAAC"}

package/dist/esm/components/docs/table-of-contents.js

@@ -0,0 +1,2 @@
+"use client";import l,{useEffect as S,useState as b,useCallback as x,useRef as u,memo as A}from"react";import{Text as k,Link as E,Flex as h}from"@kushagradhawan/kookie-ui";const R=a=>a.toLowerCase().replace(/[^\w\s-]/g,"").replace(/\s+/g,"-").trim(),P=A(function({className:y,levels:f=[2],title:C="On this page",renderContainer:m}){const[d,I]=b([]),[T,v]=b(""),r=u(null),c=u(null),s=u(null),g=x(()=>{c.current=requestAnimationFrame(()=>{const t=document.querySelector("[data-content-area]");if(!t)return;const O=f.map(e=>`h${e}`).join(", "),i=Array.from(t.querySelectorAll(O)).map(e=>{const o=e.textContent||"";let n=e.id;return!n&&o&&(n=R(o),e.id=n),{id:n,text:o,level:parseInt(e.tagName.charAt(1))}}).filter(e=>e.id&&e.text);if(I(i),r.current&&(r.current.disconnect(),r.current=null),i.length>0){const e=new IntersectionObserver(o=>{o.forEach(n=>{n.isIntersecting&&v(n.target.id)})},{rootMargin:"-20% 0% -35% 0%"});i.forEach(({id:o})=>{const n=document.getElementById(o);n&&e.observe(n)}),r.current=e}})},[f]);S(()=>(s.current=window.setTimeout(()=>{g()},100),()=>{s.current&&(clearTimeout(s.current),s.current=null),c.current&&(cancelAnimationFrame(c.current),c.current=null),r.current&&(r.current.disconnect(),r.current=null)}),[g]);const w=x(t=>({display:"block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",paddingLeft:t>2?`${(t-2)*12}px`:"0"}),[]);if(d.length===0)return null;const p=l.createElement(h,{direction:"column",gap:"3",className:y},l.createElement(k,{size:"1",weight:"medium",color:"gray"},C),l.createElement(h,{direction:"column",gap:"2"},d.map(t=>l.createElement(E,{key:t.id,color:"gray",highContrast:T===t.id,size:"1",href:`#${t.id}`,style:w(t.level)},t.text))));return m?m(p):p});export{P as TableOfContents};
+//# sourceMappingURL=table-of-contents.js.map

package/dist/esm/components/docs/table-of-contents.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/docs/table-of-contents.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React, { useEffect, useState, useCallback, useRef, memo } from 'react';\nimport { Box, Text, Link, Flex } from '@kushagradhawan/kookie-ui';\nimport type { TocItem } from './types.js';\n\n// Generate slug from heading text\nconst generateSlug = (text: string): string => {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, '')\n    .replace(/\\s+/g, '-')\n    .trim();\n};\n\nexport interface TableOfContentsProps {\n  className?: string;\n  /** Heading levels to include (default: [2]) */\n  levels?: number[];\n  /** Title shown above TOC (default: \"On this page\") */\n  title?: string;\n  /** Optional wrapper for the TOC content */\n  renderContainer?: (tocContent: React.ReactNode) => React.ReactNode | null;\n}\n\nexport const TableOfContents = memo(function TableOfContents({\n  className,\n  levels = [2],\n  title = 'On this page',\n  renderContainer,\n}: TableOfContentsProps) {\n  const [toc, setToc] = useState<TocItem[]>([]);\n  const [activeId, setActiveId] = useState<string>('');\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const rafIdRef = useRef<number | null>(null);\n  const timeoutIdRef = useRef<number | null>(null);\n\n  const extractHeadings = useCallback(() => {\n    rafIdRef.current = requestAnimationFrame(() => {\n      const contentArea = document.querySelector('[data-content-area]');\n      if (!contentArea) return;\n\n      // Build selector from levels\n      const selector = levels.map((l) => `h${l}`).join(', ');\n      const headingElements = Array.from(contentArea.querySelectorAll(selector));\n\n      const headings = headingElements\n        .map((heading) => {\n          const text = heading.textContent || '';\n          let id = heading.id;\n\n          if (!id && text) {\n            id = generateSlug(text);\n            heading.id = id;\n          }\n\n          return {\n            id,\n            text,\n            level: parseInt(heading.tagName.charAt(1)),\n          };\n        })\n        .filter((item) => item.id && item.text);\n\n      setToc(headings);\n\n      // Disconnect any previous observer\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n\n      if (headings.length > 0) {\n        const observer = new IntersectionObserver(\n          (entries) => {\n            entries.forEach((entry) => {\n              if (entry.isIntersecting) {\n                setActiveId(entry.target.id);\n              }\n            });\n          },\n          { rootMargin: '-20% 0% -35% 0%' }\n        );\n\n        headings.forEach(({ id }) => {\n          const element = document.getElementById(id);\n          if (element) observer.observe(element);\n        });\n\n        observerRef.current = observer;\n      }\n    });\n  }, [levels]);\n\n  useEffect(() => {\n    // Initial extraction with delay for DOM readiness\n    timeoutIdRef.current = window.setTimeout(() => {\n      extractHeadings();\n    }, 100);\n\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n        timeoutIdRef.current = null;\n      }\n      if (rafIdRef.current) {\n        cancelAnimationFrame(rafIdRef.current);\n        rafIdRef.current = null;\n      }\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n    };\n  }, [extractHeadings]);\n\n  const getLinkStyle = useCallback(\n    (level: number): React.CSSProperties => ({\n      display: 'block',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      paddingLeft: level > 2 ? `${(level - 2) * 12}px` : '0',\n    }),\n    []\n  );\n\n  if (toc.length === 0) return null;\n\n  const tocContent = (\n    <Flex direction=\"column\" gap=\"3\" className={className}>\n      <Text size=\"1\" weight=\"medium\" color=\"gray\">\n        {title}\n      </Text>\n      <Flex direction=\"column\" gap=\"2\">\n        {toc.map((item) => (\n          <Link\n            key={item.id}\n            color=\"gray\"\n            highContrast={activeId === item.id}\n            size=\"1\"\n            href={`#${item.id}`}\n            style={getLinkStyle(item.level)}\n          >\n            {item.text}\n          </Link>\n        ))}\n      </Flex>\n    </Flex>\n  );\n\n  if (renderContainer) {\n    return renderContainer(tocContent);\n  }\n\n  return tocContent;\n});\n"],
+  "mappings": "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",
+  "names": ["React", "useEffect", "useState", "useCallback", "useRef", "memo", "Text", "Link", "Flex", "generateSlug", "text", "TableOfContents", "className", "levels", "title", "renderContainer", "toc", "setToc", "activeId", "setActiveId", "observerRef", "rafIdRef", "timeoutIdRef", "extractHeadings", "contentArea", "selector", "l", "headings", "heading", "id", "item", "observer", "entries", "entry", "element", "getLinkStyle", "level", "tocContent"]
+}

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

@@ -0,0 +1,38 @@
+import type { ReactNode, ComponentType } from 'react';
+type IconSvgObject = readonly (readonly [string, {
+    readonly [key: string]: string | number;
+}])[];
+export interface DocsNavigationItem {
+    href: string;
+    title: string;
+    icon?: ComponentType<{
+        className?: string;
+    }> | ReactNode | IconSvgObject;
+    badge?: string;
+    items?: DocsNavigationItem[];
+}
+export interface DocsNavigationGroup {
+    label: string;
+    items: DocsNavigationItem[];
+}
+export interface DocsNavigationConfig {
+    groups: DocsNavigationGroup[];
+}
+export interface DocsPageMeta {
+    title: string;
+    description?: string;
+    category?: string;
+    source?: string;
+}
+export interface DocsLogoConfig {
+    src: string;
+    alt?: string;
+    href?: string;
+}
+export interface TocItem {
+    id: string;
+    text: string;
+    level: number;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/docs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,aAAa,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE;IAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC,CAAC,EAAE,CAAC;AAGjG,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,GAAG,aAAa,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,mBAAmB,EAAE,CAAC;CAC/B;AAGD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAGD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

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

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

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

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

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

@@ -1,4 +1,5 @@
 export * from './code/index.js';
+export * from './docs/index.js';
 export * from './hero/index.js';
 export * from './markdown/index.js';
 //# 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,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/dist/esm/components/index.js

@@ -1,2 +1,2 @@
-export*from"./code/index.js";export*from"./hero/index.js";export*from"./markdown/index.js";
+export*from"./code/index.js";export*from"./docs/index.js";export*from"./hero/index.js";export*from"./markdown/index.js";
 //# 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 './code/index.js';\nexport * from './hero/index.js';\nexport * from './markdown/index.js';\n"],
-  "mappings": "AAAA,WAAc,kBACd,WAAc,kBACd,WAAc",
+  "sourcesContent": ["export * from './code/index.js';\nexport * from './docs/index.js';\nexport * from './hero/index.js';\nexport * from './markdown/index.js';\n"],
+  "mappings": "AAAA,WAAc,kBACd,WAAc,kBACd,WAAc,kBACd,WAAc",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-blocks",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KushagraDhawan1997/kookie-blocks.git"
@@ -113,6 +113,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
+    "@kushagradhawan/kookie-ui": "^0.1.89",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@types/react": "^19.0.2",

package/src/components/docs/docs-page-header.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { useCallback } from 'react';
+import { Flex, Heading, Text, Link, Button } from '@kushagradhawan/kookie-ui';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { Copy01Icon } from '@hugeicons/core-free-icons';
+import type { DocsPageMeta } from './types.js';
+
+export interface DocsPageHeaderProps {
+  /** Page metadata */
+  meta: DocsPageMeta;
+  /** Optional actions to render on the right side */
+  actions?: React.ReactNode;
+  /** Show copy page button */
+  showCopyButton?: boolean;
+}
+
+export function DocsPageHeader({ meta, actions, showCopyButton = true }: DocsPageHeaderProps) {
+  const handleCopyPage = useCallback(() => {
+    const contentArea = document.querySelector('[data-content-area]');
+    if (!contentArea) return;
+
+    let markdown = `# ${meta.title}\n\n`;
+
+    if (meta.description) {
+      markdown += `${meta.description}\n\n`;
+    }
+
+    if (meta.source) {
+      markdown += `[View source](${meta.source})\n\n`;
+    }
+
+    markdown += `---\n\n`;
+
+    const textContent = contentArea.textContent || '';
+    markdown += textContent.trim();
+
+    navigator.clipboard.writeText(markdown);
+  }, [meta.title, meta.description, meta.source]);
+
+  return (
+    <Flex direction="column" gap="4">
+      {meta.category && (
+        <Text size="2" weight="medium">
+          {meta.category}
+        </Text>
+      )}
+
+      <Flex align="center" justify="between" gap="4">
+        <Heading as="h1" size="9" weight="medium">
+          {meta.title}
+        </Heading>
+
+        <Flex align="center" gap="4">
+          {actions}
+          {showCopyButton && (
+            <Button
+              size="2"
+              variant="ghost"
+              color="gray"
+              highContrast
+              onClick={handleCopyPage}
+              aria-label="Copy page content"
+            >
+              <HugeiconsIcon icon={Copy01Icon} />
+              Copy page
+            </Button>
+          )}
+        </Flex>
+      </Flex>
+
+      {meta.description && (
+        <Text size="3" color="gray">
+          {meta.description}
+        </Text>
+      )}
+
+      {meta.source && (
+        <Link
+          size="3"
+          href={meta.source}
+          target="_blank"
+          color="gray"
+          highContrast
+          rel="noreferrer"
+        >
+          View source →
+        </Link>
+      )}
+    </Flex>
+  );
+}

package/src/components/docs/docs-page.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Flex, Box, Separator, Container, Text, Link } from '@kushagradhawan/kookie-ui';
+import { DocsPageHeader } from './docs-page-header.js';
+import type { DocsPageMeta } from './types.js';
+
+export interface DocsPageProps {
+  children: React.ReactNode;
+  /** Page metadata for header */
+  meta?: DocsPageMeta;
+  /** Optional table of contents element */
+  tableOfContents?: React.ReactNode;
+  /** Content max width */
+  maxWidth?: string | number;
+  /** Page padding */
+  padding?: '3' | '4' | '5' | '6' | '7' | '8' | '9';
+  /** Optional header actions */
+  headerActions?: React.ReactNode;
+  /** Custom header element (overrides meta-based header) */
+  header?: React.ReactNode;
+  /** Show footer with copyright */
+  showFooter?: boolean;
+  /** Footer copyright holder */
+  footerCopyright?: {
+    name: string;
+    url?: string;
+  };
+  /** GitHub repo URL for footer */
+  githubUrl?: string;
+}
+
+export function DocsPage({
+  children,
+  meta,
+  tableOfContents,
+  maxWidth = '48rem',
+  padding = '6',
+  headerActions,
+  header,
+  showFooter = false,
+  footerCopyright,
+  githubUrl,
+}: DocsPageProps) {
+  const currentYear = new Date().getFullYear();
+  const showHeader = header || meta;
+
+  return (
+    <Flex my="6" gap={{ initial: '6', md: '6' }} align="start" direction={{ initial: 'column', lg: 'row' }}>
+      {/* Main content area */}
+      <Flex direction="column" gap="6" p={{ initial: '2', sm: '4' }} flexGrow="1" style={{ minWidth: 0 }}>
+        <Container size="2" style={{ minWidth: 0 }} data-content-area>
+          <Box p="4" width="100%">
+            <Flex direction="column" gap="8" width="100%">
+              {/* Page Header */}
+              {header ? header : meta && <DocsPageHeader meta={meta} actions={headerActions} />}
+
+              {showHeader && <Separator size="4" />}
+
+              <Flex direction="column" gap="0" width="100%">
+                {children}
+              </Flex>
+            </Flex>
+
+            {showFooter && (
+              <Flex align="center" justify="center" width="100%" pt="8">
+                <Text size="2" color="gray" align="center">
+                  © {currentYear}{' '}
+                  {footerCopyright?.url ? (
+                    <Link href={footerCopyright.url} target="_blank" rel="noreferrer">
+                      {footerCopyright.name}
+                    </Link>
+                  ) : (
+                    footerCopyright?.name || 'Your Company'
+                  )}
+                  . Licensed under MIT.
+                  {githubUrl && (
+                    <>
+                      {' '}
+                      <Link href={githubUrl} target="_blank" rel="noreferrer">
+                        GitHub
+                      </Link>
+                      .
+                    </>
+                  )}
+                </Text>
+              </Flex>
+            )}
+          </Box>
+        </Container>
+      </Flex>
+
+      {/* Table of Contents */}
+      {tableOfContents && (
+        <Box style={{ width: '240px', minWidth: '160px' }} position="sticky" top="200px" display={{ initial: 'none', lg: 'block' }}>
+          {tableOfContents}
+        </Box>
+      )}
+    </Flex>
+  );
+}