docstra 0.0.1 → 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+interface DocstraContextType {
+    openSidebar: boolean;
+    setOpenSidebar: (open: boolean) => void;
+    docstraConfig: DocstraConfig;
+    openSearchBox: boolean;
+    setOpenSearchBox: (open: boolean) => void;
+}
+interface DocstraConfig {
+    siteName?: string;
+    navbar?: {
+        logo?: {
+            src: string;
+            alt: string;
+            className?: string;
+        };
+        links?: {
+            name: string;
+            href: string;
+        }[];
+        githubRepo?: string;
+    };
+    sidebar?: {
+        links?: DocsLinkGroup[];
+    };
+}
+interface DocsLinkItem {
+    name: string;
+    href: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+interface DocsLinkGroup {
+    section: string;
+    items: DocsLinkItem[];
+}
+
+declare function DocstraProvider({ children, docstraConfig }: {
+    children: React$1.ReactNode;
+    docstraConfig: DocstraConfig;
+}): react_jsx_runtime.JSX.Element;
+declare const useDocstra: () => DocstraContextType;
+
+declare function DocstraLayout({ children, docstraConfig }: {
+    children: React.ReactNode;
+    docstraConfig: DocstraConfig;
+}): react_jsx_runtime.JSX.Element;
+
+export { type DocsLinkGroup, type DocsLinkItem, type DocstraConfig, type DocstraContextType, DocstraLayout, DocstraProvider, useDocstra };

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+interface DocstraContextType {
+    openSidebar: boolean;
+    setOpenSidebar: (open: boolean) => void;
+    docstraConfig: DocstraConfig;
+    openSearchBox: boolean;
+    setOpenSearchBox: (open: boolean) => void;
+}
+interface DocstraConfig {
+    siteName?: string;
+    navbar?: {
+        logo?: {
+            src: string;
+            alt: string;
+            className?: string;
+        };
+        links?: {
+            name: string;
+            href: string;
+        }[];
+        githubRepo?: string;
+    };
+    sidebar?: {
+        links?: DocsLinkGroup[];
+    };
+}
+interface DocsLinkItem {
+    name: string;
+    href: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+interface DocsLinkGroup {
+    section: string;
+    items: DocsLinkItem[];
+}
+
+declare function DocstraProvider({ children, docstraConfig }: {
+    children: React$1.ReactNode;
+    docstraConfig: DocstraConfig;
+}): react_jsx_runtime.JSX.Element;
+declare const useDocstra: () => DocstraContextType;
+
+declare function DocstraLayout({ children, docstraConfig }: {
+    children: React.ReactNode;
+    docstraConfig: DocstraConfig;
+}): react_jsx_runtime.JSX.Element;
+
+export { type DocsLinkGroup, type DocsLinkItem, type DocstraConfig, type DocstraContextType, DocstraLayout, DocstraProvider, useDocstra };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var B=Object.create;var g=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},k=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of E(t))!O.call(e,r)&&r!==o&&g(e,r,{get:()=>t[r],enumerable:!(i=R(t,r))||i.enumerable});return e};var H=(e,t,o)=>(o=e!=null?B(M(e)):{},k(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),I=e=>k(g({},"__esModule",{value:!0}),e);var Q={};T(Q,{DocstraLayout:()=>F,DocstraProvider:()=>v,useDocstra:()=>p});module.exports=I(Q);var l=require("react"),L=require("react/jsx-runtime"),C=(0,l.createContext)(null);function v({children:e,docstraConfig:t}){let[o,i]=(0,l.useState)(!1),[r,m]=(0,l.useState)(!1);return(0,L.jsx)(C.Provider,{value:{openSidebar:o,setOpenSidebar:i,docstraConfig:t,openSearchBox:r,setOpenSearchBox:m},children:e})}var p=()=>(0,l.useContext)(C);var x=require("lucide-react"),D=require("react");var d=require("tailwind-merge");var S=H(require("next/link")),b=require("react/jsx-runtime");function f({href:e,children:t,className:o,onNavigate:i,...r}){return e.startsWith("http")?(0,b.jsx)("a",{href:e,className:o,...r,target:"_blank",rel:"noopener noreferrer",children:t}):(0,b.jsx)(S.default,{href:e,className:o,onNavigate:i,...r,"aria-label":"Ns",children:t})}var n=require("react/jsx-runtime");function y(){let{openSidebar:e,setOpenSidebar:t,docstraConfig:o}=p(),i=[{name:"Guides",href:"/docs/guides"},{name:"APIs",href:"/docs/apis"},{name:"Examples",href:"/docs/examples"}];return(0,D.useEffect)(()=>{e?document.body.classList.add("max-md:overflow-hidden"):document.body.classList.remove("max-md:overflow-hidden")},[e]),(0,n.jsxs)("header",{className:"sticky top-0 z-10 flex items-center justify-between border-b border-gray-100 h-18 px-4 md:px-6 bg-white",children:[(0,n.jsx)(f,{href:"/",children:(0,n.jsx)("img",{src:o.navbar?.logo?.src||"/logo.png",alt:o.navbar?.logo?.alt||"Logo",className:(0,d.twMerge)("h-9.5 w-auto",o.navbar?.logo?.className)})}),(0,n.jsxs)("div",{className:"hidden divide-x divide-gray-200 md:flex items-center",children:[o.navbar?.links?.map(r=>(0,n.jsx)(f,{href:r.href,className:"px-6 hover:text-gray-500",children:r.name},r.name)),(0,n.jsx)(f,{href:o.navbar?.githubRepo||"https://github.com/sudhucodes/docstra",children:(0,n.jsx)("svg",{className:"size-6 mx-6",width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:(0,n.jsx)("path",{d:"M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3"})})})]}),(0,n.jsx)("button",{onClick:()=>t(!e),className:"md:hidden transition text-gray-600 active:ring-2 ring-gray-200 p-1.5 rounded-md",children:e?(0,n.jsx)(x.XIcon,{className:"size-6.5"}):(0,n.jsx)(x.TextAlignEnd,{className:"size-6.5"})})]})}var z=require("lucide-react"),A=require("next/navigation");var a=require("react/jsx-runtime");function N(){let{openSidebar:e,setOpenSidebar:t,setOpenSearchBox:o,docstraConfig:i}=p(),r=(0,A.usePathname)();return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:(0,d.twMerge)("fixed inset-0 z-20 bg-black/50 opacity-0 pointer-events-none transition-all duration-300",e&&"opacity-100 pointer-events-auto"),onClick:()=>t(!1)}),(0,a.jsxs)("aside",{className:(0,d.twMerge)("sticky md:top-18 h-[calc(100svh-72px)] scrollbar-y w-screen z-21 md:w-72 pb-10 shrink-0 border-r border-gray-200 p-4 max-md:fixed bg-white overflow-y-auto transition-all duration-300",e?"top-32":"top-full"),children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 cursor-pointer mt-6 mb-4 p-2.5 text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50",onClick:()=>o(!0),children:[(0,a.jsx)(z.SearchIcon,{className:"size-4.5"}),(0,a.jsx)("p",{children:"Search"}),(0,a.jsxs)("div",{className:"ms-auto font-mono inline-flex gap-0.5",children:[(0,a.jsx)("span",{className:"rounded-md border border-gray-200 px-1.5",children:"Ctrl"}),(0,a.jsx)("span",{className:"rounded-md border border-gray-200 px-1.5",children:"K"})]})]}),i.sidebar?.links?.map(m=>(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{className:"inline-flex items-center gap-2 mb-2 mt-2 px-2",children:m.section}),(0,a.jsx)("ul",{className:"mb-4",children:m.items.map(u=>(0,a.jsx)("li",{children:(0,a.jsxs)(f,{href:u.href,onNavigate:()=>e&&t(!1),className:(0,d.twMerge)("flex items-center gap-2 text-gray-500 hover:bg-gray-100 py-2 px-2.5 rounded-lg text-sm",r===u.href&&"bg-gray-100 text-gray-800"),children:[u.icon&&(0,a.jsx)(u.icon,{className:"size-4"}),(0,a.jsx)("span",{children:u.name})]})},u.href))})]},m.section))]})]})}var P=require("lucide-react");var h=require("react"),s=require("react/jsx-runtime");function w(){let{openSearchBox:e,setOpenSearchBox:t}=p(),[o,i]=(0,h.useState)("");return(0,h.useEffect)(()=>{console.log(`Search query: ${o}`)},[o]),(0,h.useEffect)(()=>{let r=m=>{m.ctrlKey&&m.key==="k"&&(m.preventDefault(),t(!0))};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[]),(0,s.jsx)("div",{onClick:()=>{t(!1),i("")},className:(0,d.twMerge)("fixed inset-0 z-25 flex items-start justify-center bg-white/40 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300",e&&"opacity-100 pointer-events-auto"),children:(0,s.jsx)("div",{onClick:r=>r.stopPropagation(),className:"flex flex-col items-center mt-30 max-w-lg w-full max-md:px-4",children:(0,s.jsx)("form",{className:(0,d.twMerge)("relative flex items-center justify-between w-full bg-white border border-slate-200 text-gray-400 h-15 p-0.5 rounded-md"),children:e&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(P.SearchIcon,{className:"size-5.5 mx-3 shrink-0"}),(0,s.jsx)("input",{className:"w-full bg-transparent h-full outline-none text-gray-400 placeholder:text-gray-400",type:"text",placeholder:"Search components",spellCheck:"false",autoFocus:!0,value:o,onChange:r=>i(r.target.value),name:"searchQuery",required:!0}),(0,s.jsxs)("svg",{className:"h-4.5 shrink-0 w-auto mr-3",width:"29",height:"18",viewBox:"0 0 29 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,s.jsx)("path",{d:"M13.5 2.25a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 1 0 2.25-2.25h-9a2.25 2.25 0 1 0 2.25 2.25v-9A2.25 2.25 0 1 0 4.5 6.75h9a2.25 2.25 0 0 0 0-4.5",stroke:"#99A1AF",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,s.jsx)("path",{d:"M25.986 14 21.45 8.89l4.438-4.69h2.058l-4.9 5.096v-.882L28.086 14zm-5.922 0V4.2h1.61V14z",fill:"#99A1AF"})]})]})})})})}var c=require("react/jsx-runtime");function K({children:e}){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(y,{}),(0,c.jsx)(w,{}),(0,c.jsxs)("div",{className:"min-h-screen flex bg-white",children:[(0,c.jsx)(N,{}),(0,c.jsx)("main",{id:"docs-content",className:"w-full px-4 md:px-8 py-10",children:e})]})]})}function F({children:e,docstraConfig:t}){return(0,c.jsx)(v,{docstraConfig:t,children:(0,c.jsx)(K,{children:e})})}0&&(module.exports={DocstraLayout,DocstraProvider,useDocstra});

package/dist/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+import{createContext as S,useContext as D,useState as v}from"react";import{jsx as z}from"react/jsx-runtime";var b=S(null);function y({children:e,docstraConfig:r}){let[o,n]=v(!1),[t,s]=v(!1);return z(b.Provider,{value:{openSidebar:o,setOpenSidebar:n,docstraConfig:r,openSearchBox:t,setOpenSearchBox:s},children:e})}var p=()=>D(b);import{TextAlignEnd as P,XIcon as B}from"lucide-react";import{useEffect as R}from"react";import{twMerge as i}from"tailwind-merge";import A from"next/link";import{jsx as N}from"react/jsx-runtime";function d({href:e,children:r,className:o,onNavigate:n,...t}){return e.startsWith("http")?N("a",{href:e,className:o,...t,target:"_blank",rel:"noopener noreferrer",children:r}):N(A,{href:e,className:o,onNavigate:n,...t,"aria-label":"Ns",children:r})}import{jsx as c,jsxs as w}from"react/jsx-runtime";function h(){let{openSidebar:e,setOpenSidebar:r,docstraConfig:o}=p(),n=[{name:"Guides",href:"/docs/guides"},{name:"APIs",href:"/docs/apis"},{name:"Examples",href:"/docs/examples"}];return R(()=>{e?document.body.classList.add("max-md:overflow-hidden"):document.body.classList.remove("max-md:overflow-hidden")},[e]),w("header",{className:"sticky top-0 z-10 flex items-center justify-between border-b border-gray-100 h-18 px-4 md:px-6 bg-white",children:[c(d,{href:"/",children:c("img",{src:o.navbar?.logo?.src||"/logo.png",alt:o.navbar?.logo?.alt||"Logo",className:i("h-9.5 w-auto",o.navbar?.logo?.className)})}),w("div",{className:"hidden divide-x divide-gray-200 md:flex items-center",children:[o.navbar?.links?.map(t=>c(d,{href:t.href,className:"px-6 hover:text-gray-500",children:t.name},t.name)),c(d,{href:o.navbar?.githubRepo||"https://github.com/sudhucodes/docstra",children:c("svg",{className:"size-6 mx-6",width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:c("path",{d:"M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3"})})})]}),c("button",{onClick:()=>r(!e),className:"md:hidden transition text-gray-600 active:ring-2 ring-gray-200 p-1.5 rounded-md",children:e?c(B,{className:"size-6.5"}):c(P,{className:"size-6.5"})})]})}import{SearchIcon as E}from"lucide-react";import{usePathname as M}from"next/navigation";import{Fragment as O,jsx as a,jsxs as f}from"react/jsx-runtime";function g(){let{openSidebar:e,setOpenSidebar:r,setOpenSearchBox:o,docstraConfig:n}=p(),t=M();return f(O,{children:[a("div",{className:i("fixed inset-0 z-20 bg-black/50 opacity-0 pointer-events-none transition-all duration-300",e&&"opacity-100 pointer-events-auto"),onClick:()=>r(!1)}),f("aside",{className:i("sticky md:top-18 h-[calc(100svh-72px)] scrollbar-y w-screen z-21 md:w-72 pb-10 shrink-0 border-r border-gray-200 p-4 max-md:fixed bg-white overflow-y-auto transition-all duration-300",e?"top-32":"top-full"),children:[f("div",{className:"flex items-center gap-2 cursor-pointer mt-6 mb-4 p-2.5 text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50",onClick:()=>o(!0),children:[a(E,{className:"size-4.5"}),a("p",{children:"Search"}),f("div",{className:"ms-auto font-mono inline-flex gap-0.5",children:[a("span",{className:"rounded-md border border-gray-200 px-1.5",children:"Ctrl"}),a("span",{className:"rounded-md border border-gray-200 px-1.5",children:"K"})]})]}),n.sidebar?.links?.map(s=>f("div",{children:[a("p",{className:"inline-flex items-center gap-2 mb-2 mt-2 px-2",children:s.section}),a("ul",{className:"mb-4",children:s.items.map(l=>a("li",{children:f(d,{href:l.href,onNavigate:()=>e&&r(!1),className:i("flex items-center gap-2 text-gray-500 hover:bg-gray-100 py-2 px-2.5 rounded-lg text-sm",t===l.href&&"bg-gray-100 text-gray-800"),children:[l.icon&&a(l.icon,{className:"size-4"}),a("span",{children:l.name})]})},l.href))})]},s.section))]})]})}import{SearchIcon as T}from"lucide-react";import{useEffect as k,useState as H}from"react";import{Fragment as I,jsx as m,jsxs as C}from"react/jsx-runtime";function x(){let{openSearchBox:e,setOpenSearchBox:r}=p(),[o,n]=H("");return k(()=>{console.log(`Search query: ${o}`)},[o]),k(()=>{let t=s=>{s.ctrlKey&&s.key==="k"&&(s.preventDefault(),r(!0))};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[]),m("div",{onClick:()=>{r(!1),n("")},className:i("fixed inset-0 z-25 flex items-start justify-center bg-white/40 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300",e&&"opacity-100 pointer-events-auto"),children:m("div",{onClick:t=>t.stopPropagation(),className:"flex flex-col items-center mt-30 max-w-lg w-full max-md:px-4",children:m("form",{className:i("relative flex items-center justify-between w-full bg-white border border-slate-200 text-gray-400 h-15 p-0.5 rounded-md"),children:e&&C(I,{children:[m(T,{className:"size-5.5 mx-3 shrink-0"}),m("input",{className:"w-full bg-transparent h-full outline-none text-gray-400 placeholder:text-gray-400",type:"text",placeholder:"Search components",spellCheck:"false",autoFocus:!0,value:o,onChange:t=>n(t.target.value),name:"searchQuery",required:!0}),C("svg",{className:"h-4.5 shrink-0 w-auto mr-3",width:"29",height:"18",viewBox:"0 0 29 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[m("path",{d:"M13.5 2.25a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 1 0 2.25-2.25h-9a2.25 2.25 0 1 0 2.25 2.25v-9A2.25 2.25 0 1 0 4.5 6.75h9a2.25 2.25 0 0 0 0-4.5",stroke:"#99A1AF",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),m("path",{d:"M25.986 14 21.45 8.89l4.438-4.69h2.058l-4.9 5.096v-.882L28.086 14zm-5.922 0V4.2h1.61V14z",fill:"#99A1AF"})]})]})})})})}import{Fragment as F,jsx as u,jsxs as L}from"react/jsx-runtime";function K({children:e}){return L(F,{children:[u(h,{}),u(x,{}),L("div",{className:"min-h-screen flex bg-white",children:[u(g,{}),u("main",{id:"docs-content",className:"w-full px-4 md:px-8 py-10",children:e})]})]})}function ye({children:e,docstraConfig:r}){return u(y,{docstraConfig:r,children:u(K,{children:e})})}export{ye as DocstraLayout,y as DocstraProvider,p as useDocstra};

package/dist/styles.css

@@ -0,0 +1,724 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-lg: 32rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --blur-md: 12px;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-32 {
+    top: calc(var(--spacing) * 32);
+  }
+  .top-full {
+    top: 100%;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
+  .z-21 {
+    z-index: 21;
+  }
+  .z-25 {
+    z-index: 25;
+  }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .mx-6 {
+    margin-inline: calc(var(--spacing) * 6);
+  }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mt-30 {
+    margin-top: calc(var(--spacing) * 30);
+  }
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+  .size-5\.5 {
+    width: calc(var(--spacing) * 5.5);
+    height: calc(var(--spacing) * 5.5);
+  }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .size-6\.5 {
+    width: calc(var(--spacing) * 6.5);
+    height: calc(var(--spacing) * 6.5);
+  }
+  .h-4\.5 {
+    height: calc(var(--spacing) * 4.5);
+  }
+  .h-9\.5 {
+    height: calc(var(--spacing) * 9.5);
+  }
+  .h-15 {
+    height: calc(var(--spacing) * 15);
+  }
+  .h-18 {
+    height: calc(var(--spacing) * 18);
+  }
+  .h-\[calc\(100svh-72px\)\] {
+    height: calc(100svh - 72px);
+  }
+  .h-full {
+    height: 100%;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-auto {
+    width: auto;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .w-screen {
+    width: 100vw;
+  }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .divide-x {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
+      border-inline-style: var(--tw-border-style);
+      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+  }
+  .divide-gray-200 {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-gray-200);
+    }
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
+  .border-gray-100 {
+    border-color: var(--color-gray-100);
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-slate-200 {
+    border-color: var(--color-slate-200);
+  }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-white\/40 {
+    background-color: color-mix(in srgb, #fff 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+  }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
+  .ring-gray-200 {
+    --tw-ring-color: var(--color-gray-200);
+  }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .placeholder\:text-gray-400 {
+    &::placeholder {
+      color: var(--color-gray-400);
+    }
+  }
+  .hover\:bg-gray-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-50);
+      }
+    }
+  }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
+  .hover\:text-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-500);
+      }
+    }
+  }
+  .active\:ring-2 {
+    &:active {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .max-md\:fixed {
+    @media (width < 48rem) {
+      position: fixed;
+    }
+  }
+  .max-md\:overflow-hidden {
+    @media (width < 48rem) {
+      overflow: hidden;
+    }
+  }
+  .max-md\:px-4 {
+    @media (width < 48rem) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:top-18 {
+    @media (width >= 48rem) {
+      top: calc(var(--spacing) * 18);
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:w-72 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 72);
+    }
+  }
+  .md\:px-6 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:px-8 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+}
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-divide-x-reverse: 0;
+      --tw-border-style: solid;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}

package/package.json

@@ -1,13 +1,38 @@
-{
-  "name": "docstra",
-  "version": "0.0.1",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "SudhuCodes",
-  "license": "ISC",
-  "type": "commonjs"
+{
+    "name": "docstra",
+    "version": "0.1.0",
+    "files": [
+        "dist"
+    ],
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        },
+        "./styles.css": "./dist/styles.css"
+    },
+    "scripts": {
+        "build": "tsup && npm run build:css",
+        "build:css": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/styles.css",
+        "prettier": "prettier --write src"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.2",
+        "prettier": "^3.6.2",
+        "tsup": "^8.5.0",
+        "typescript": "^5.9.3"
+    },
+    "dependencies": {
+        "@tailwindcss/cli": "^4.1.17",
+        "lucide-react": "^0.554.0",
+        "next": "^16.0.3",
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.17"
+    }
 }