@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/data/code-data.tsx

@@ -0,0 +1,1040 @@
+export const codeData = [
+    {
+        name: "Code Comparison 1",
+        value: "code-comparison1",
+        importPath: "~/components/catalyst-ui/code/code-comparison1",
+        multiImport: null,
+        basicusage: `
+<CodeComparison
+  beforeCode="const x = 1"
+  afterCode="const x = 2"
+  language="javascript"
+  filename="example.js"
+  lightTheme="min-light"
+  darkTheme="min-dark"
+/>
+
+<CodeComparison
+  beforeCode={beforeCode}
+  afterCode={afterCode}
+  language="typescript"
+  filename="component.tsx"
+  lightTheme="github-light"
+  darkTheme="github-dark"
+  highlightColor="#00ff00"
+/>`,
+        path: "/components/catalyst-ui/code/code-comparison1.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/code-comparison1.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["code", "comparison", "syntax", "highlighting"],
+        features: ["Syntax Highlighting", "Diff View", "Theme Support", "Interactive"],
+        dependencies: ["shiki", "@shikijs/transformers", "lucide-react", "next-themes"],
+        props: {
+            "CodeComparison": [
+                { name: "beforeCode", type: "string", default: "required" },
+                { name: "afterCode", type: "string", default: "required" },
+                { name: "language", type: "string", default: "required" },
+                { name: "filename", type: "string", default: "required" },
+                { name: "lightTheme", type: "string", default: "required" },
+                { name: "darkTheme", type: "string", default: "required" },
+                { name: "highlightColor", type: "string", default: "#ff3333" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Terminal1",
+        value: "terminal1",
+        importPath: "~/components/catalyst-ui/code/terminal-1",
+        multiImport: "Terminal, AnimatedSpan, TypingAnimation",
+        basicusage: null,
+        path: "/components/catalyst-ui/code/terminal-1.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/terminal-1.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["terminal", "typing", "animation", "code", "console"],
+        features: ["Typing Animation", "Terminal Styling", "Motion Effects", "Customizable Timing"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "Terminal": [
+                { name: "className", type: "string", default: "null" },
+                { name: "children", type: "ReactNode", default: "null" }
+            ],
+            "AnimatedSpan": [
+                { name: "delay", type: "number", default: "0" },
+                { name: "className", type: "string", default: "null" },
+                { name: "children", type: "ReactNode", default: "null" }
+            ],
+            "TypingAnimation": [
+                { name: "children", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "duration", type: "number", default: "60" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "as", type: "React.ElementType", default: "span" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Sandbox2",
+        value: "sandbox2",
+        importPath: "~/components/catalyst-ui/code/sandbox",
+        multiImport: "SandboxTabs2, SandboxTabsList2, SandboxTabsTrigger2, SandboxTabsContent2, SandboxFileExplorer2, SandboxCodeEditor2, SandboxPreview2, SandboxConsole2",
+        basicusage: `<SandboxTabs2 defaultValue="editor">
+  <SandboxTabsList2>
+    <SandboxTabsTrigger2 value="editor">Editor</SandboxTabsTrigger>
+    <SandboxTabsTrigger2 value="preview">Preview</SandboxTabsTrigger>
+  </SandboxTabsList2>
+  <SandboxTabsContent2 value="editor">
+    <SandboxCodeEditor2 value={code} onChange={setCode} />
+  </SandboxTabsContent2>
+  <SandboxTabsContent2 value="preview">
+    <SandboxPreview srcDoc={code} />
+  </SandboxTabsContent2>
+</SandboxTabs2>`,
+        path: "/components/catalyst-ui/code/sandbox2.tsx",
+        source: null,
+        usagePath: null,
+        usage: `
+export function SandboxDemo2() {
+  const [activeFile, setActiveFile] = useState('index.html');
+  const [code, setCode] = useState(\`<!DOCTYPE html>
+<html>
+<head>
+  <title>Preview</title>
+</head>
+<body>
+  <h1>Hello World</h1>
+  <p>Edit the code to see changes</p>
+</body>
+</html>\`);
+
+  const files = ['index.html', 'styles.css', 'script.js'];
+
+  return (
+	<div className="mx-auto max-w-6xl p-6">
+	  <SandboxTabs2 defaultValue="editor" className="h-[600px]">
+		<SandboxTabsList2>
+		  <SandboxTabsTrigger2 value="editor">Editor</SandboxTabsTrigger2>
+		  <SandboxTabsTrigger2 value="preview">Preview</SandboxTabsTrigger2>
+		  <SandboxTabsTrigger2 value="console">Console</SandboxTabsTrigger2>
+		</SandboxTabsList2>
+		
+		<SandboxTabsContent2 value="editor" className="flex">
+		  <SandboxFileExplorer2
+			files={files}
+			activeFile={activeFile}
+			onFileSelect={setActiveFile}
+			className="w-48 border-r"
+		  />
+		  <SandboxCodeEditor2
+			value={code}
+			onChange={setCode}
+			language="html"
+			className="flex-1"
+		  />
+		</SandboxTabsContent2>
+
+		<SandboxTabsContent2 value="preview">
+		  <SandboxPreview2 srcDoc={code} />
+		</SandboxTabsContent2>
+
+		<SandboxTabsContent2 value="console">
+		  <SandboxConsole2
+			logs={[
+			  { type: 'log', message: 'Application started' },
+			  { type: 'warn', message: 'This is a warning' },
+			]}
+		  />
+		</SandboxTabsContent2>
+	  </SandboxTabs2>
+	</div>
+  );
+}`,
+        premium: true,
+        category: "Code",
+        tags: ["code", "editor", "preview", "sandbox"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["react"],
+        props: {
+            "SandboxTabs": [
+                { name: "defaultValue", type: "string", default: "null" },
+                { name: "value", type: "string", default: "null" },
+                { name: "onValueChange", type: "(value: string) => void", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "SandboxFileExplorer": [
+                { name: "files", type: "string[]", default: "[]" },
+                { name: "activeFile", type: "string", default: "null" },
+                { name: "onFileSelect", type: "(file: string) => void", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "SandboxCodeEditor": [
+                { name: "value", type: "string", default: "" },
+                { name: "onChange", type: "(value: string) => void", default: "null" },
+                { name: "language", type: "string", default: "javascript" },
+                { name: "readOnly", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "SandboxPreview": [
+                { name: "html", type: "string", default: "null" },
+                { name: "srcDoc", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "SandboxConsole": [
+                { name: "logs", type: "Array<{ type: 'log' | 'error' | 'warn'; message: string }>", default: "[]" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Code Comparison",
+        value: "code-comparison",
+        importPath: "~/components/catalyst-ui/components/code-comparison",
+        multiImport: null,
+        basicusage: `
+<CodeComparison
+  beforeCode="console.log('old')"
+  afterCode="console.log('new')"
+  language="javascript"
+  filename="example.js"
+  lightTheme="github-light"
+  darkTheme="github-dark"
+/>
+
+<CodeComparison
+  beforeCode={beforeCode}
+  afterCode={afterCode}
+  language="typescript"
+  filename="middleware.ts"
+  lightTheme="min-light"
+  darkTheme="min-dark"
+  highlightColor="rgba(101, 117, 133, 0.16)"
+/>`,
+        path: "/components/catalyst-ui/components/code-comparison.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/components/code-comparison.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["code", "comparison", "syntax", "highlighting"],
+        features: ["Syntax Highlighting", "Diff View", "Theme Support", "TypeScript"],
+        dependencies: ["shiki", "@shikijs/transformers", "lucide-react", "next-themes", "react"],
+        props: {
+            "CodeComparison": [
+                { name: "beforeCode", type: "string", default: "null" },
+                { name: "afterCode", type: "string", default: "null" },
+                { name: "language", type: "string", default: "null" },
+                { name: "filename", type: "string", default: "null" },
+                { name: "lightTheme", type: "string", default: "null" },
+                { name: "darkTheme", type: "string", default: "null" },
+                { name: "highlightColor", type: "string", default: "#ff3333" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Terminal",
+        value: "terminal",
+        importPath: "~/components/catalyst-ui/code/terminal",
+        multiImport: "Terminal, AnimatedSpan, TypingAnimation",
+        basicusage: `
+<Terminal>
+  <TypingAnimation>&gt; npm install</TypingAnimation>
+  <AnimatedSpan className="text-green-500">✔ Dependencies installed</AnimatedSpan>
+  <TypingAnimation>Project ready!</TypingAnimation>
+</Terminal>
+
+<Terminal 
+  sequence={false}
+  startOnView={true}
+  className="w-full max-w-2xl"
+>
+  <TypingAnimation delay={500}>&gt; Initializing system...</TypingAnimation>
+  <AnimatedSpan delay={1000} className="text-blue-500">System ready</AnimatedSpan>
+</Terminal>`,
+        path: null,
+        source: null,
+        usagePath: "/components/catalyst-ui/code/terminal.tsx",
+        usage: `
+export function TerminalDemo() {
+  return (
+    <Terminal>
+      <TypingAnimation>&gt; pnpm dlx shadcn@latest init</TypingAnimation>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Preflight checks.
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Verifying framework. Found Next.js.
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Validating Tailwind CSS.
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Validating alias.
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Writing components.json.
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Checking registry.
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Updating tailwind.config.ts
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Updating app/globals.css
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-green-500">
+        ✔ Installing dependencies.
+      </AnimatedSpan>
+
+      <AnimatedSpan className="text-blue-500">
+        <span> Updated 1 file:</span>
+        <span className="pl-2">- lib/utils.ts</span>
+      </AnimatedSpan>
+
+      <TypingAnimation className="text-muted-foreground">
+        Success! Project initialization completed.
+      </TypingAnimation>
+
+      <TypingAnimation className="text-muted-foreground">
+        You may now add components.
+      </TypingAnimation>
+    </Terminal>
+  )
+}
+`,
+        premium: true,
+        category: "Code",
+        tags: ["animation", "typing", "terminal", "sequence"],
+        features: ["Typing Animation", "Sequenced", "Interactive", "TypeScript"],
+        dependencies: ["motion", "react"],
+        props: {
+            "Terminal": [
+                { name: "className", type: "string", default: "null" },
+                { name: "sequence", type: "boolean", default: "true" },
+                { name: "startOnView", type: "boolean", default: "true" }
+            ],
+            "AnimatedSpan": [
+                { name: "className", type: "string", default: "null" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "startOnView", type: "boolean", default: "false" }
+            ],
+            "TypingAnimation": [
+                { name: "className", type: "string", default: "null" },
+                { name: "duration", type: "number", default: "60" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "as", type: "React.ElementType", default: "span" },
+                { name: "startOnView", type: "boolean", default: "true" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Sandbox",
+        value: "sandbox",
+        importPath: "~/components/catalyst-ui/code/sandbox",
+        multiImport: "SandboxTabs, SandboxTabsList, SandboxTabsTrigger, SandboxTabsContent, SandboxCodeEditor, SandboxConsole, SandboxFileExplorer, SandboxLayout, SandboxPreview, SandboxProvider",
+        basicusage: `
+
+
+
+const Example = () => (
+  <SandboxProvider>
+    <SandboxLayout>
+      <SandboxTabs defaultValue="preview">
+        <SandboxTabsList>
+          <SandboxTabsTrigger value="code">
+            <CodeIcon size={14} />
+            Code
+          </SandboxTabsTrigger>
+          <SandboxTabsTrigger value="preview">
+            <AppWindowIcon size={14} />
+            Preview
+          </SandboxTabsTrigger>
+          <SandboxTabsTrigger value="console">
+            <TerminalIcon size={14} />
+            Console
+          </SandboxTabsTrigger>
+        </SandboxTabsList>
+        <SandboxTabsContent className="overflow-hidden" value="code">
+          <ResizablePanelGroup direction="horizontal">
+            <ResizablePanel
+              className="overflow-y-auto"
+              defaultSize={25}
+              maxSize={40}
+              minSize={20}
+            >
+              <SandboxFileExplorer />
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel className="overflow-y-auto">
+              <SandboxCodeEditor />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </SandboxTabsContent>
+        <SandboxTabsContent value="preview">
+          <SandboxPreview
+            showOpenInCodeSandbox={false}
+            showRefreshButton={false}
+          />
+        </SandboxTabsContent>
+        <SandboxTabsContent value="console">
+          <SandboxConsole />
+        </SandboxTabsContent>
+      </SandboxTabs>
+    </SandboxLayout>
+  </SandboxProvider>
+);
+export default Example;`,
+        path: "/components/catalyst-ui/code/sandbox-tabs.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/sandbox-tabs.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["sandbox", "code-editor", "preview", "development"],
+        features: ["Resizable", "TypeScript", "File Explorer", "Console"],
+        dependencies: ["@codesandbox/sandpack-react", "lucide-react", "react"],
+        props: {
+            "SandboxTabs": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | minimal", default: "default" },
+                { name: "defaultValue", type: "string", default: "null" },
+                { name: "value", type: "string", default: "null" },
+                { name: "onValueChange", type: "(value: string) => void", default: "null" }
+            ],
+            "SandboxTabsList": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | minimal", default: "default" }
+            ],
+            "SandboxTabsTrigger": [
+                { name: "className", type: "string", default: "null" },
+                { name: "value", type: "string", default: "null" }
+            ],
+            "SandboxTabsContent": [
+                { name: "className", type: "string", default: "null" },
+                { name: "value", type: "string", default: "null" }
+            ],
+            "SandboxProvider": [
+                { name: "className", type: "string", default: "null" },
+                { name: "files", type: "Record<string, string>", default: "{}" },
+                { name: "template", type: "string", default: "react" }
+            ],
+            "SandboxLayout": [
+                { name: "className", type: "string", default: "null" }
+            ],
+            "SandboxCodeEditor": [
+                { name: "showTabs", type: "boolean", default: "false" }
+            ],
+            "SandboxPreview": [
+                { name: "className", type: "string", default: "null" },
+                { name: "showOpenInCodeSandbox", type: "boolean", default: "false" }
+            ],
+            "SandboxConsole": [
+                { name: "className", type: "string", default: "null" }
+            ],
+            "SandboxFileExplorer": [
+                { name: "autoHiddenFiles", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "null" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Code Block Section",
+        value: "code-block-section",
+        importPath: "~/components/catalyst-ui/code/code-block-section",
+        multiImport: "CodeBlockSection, CodeBlock, CodeBlockHeader, CodeBlockSelect, CodeBlockSelectTrigger, CodeBlockSelectValue, CodeBlockSelectContent, CodeBlockSelectItem, CodeBlockCopyButton, CodeBlockBody, CodeBlockItem, CodeBlockContent",
+        basicusage: `<CodeBlockSection 
+  data={{
+    language: 'tsx',
+    filename: 'button.tsx', 
+    code: \`function Button({ children }) {
+  return <button>{children}</button>;
+}\`
+  }} 
+/>
+
+<CodeBlockSection   data={[
+    { language: 'tsx', filename: 'button.tsx', code: 'const Button = () => {}' },
+    { language: 'tsx', filename: 'input.tsx', code: 'const Input = () => {}' }
+  ]}
+  defaultOpen={true}
+  variant="default"
+/>`,
+        path: "/components/catalyst-ui/code/code-block-section.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/code-block-section.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "syntax-highlighting", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible", "Collapsible", "Multi-file Support", "Syntax Highlighting"],
+        dependencies: ["lucide-react", "react", "@radix-ui/react-use-controllable-state", "class-variance-authority", "shiki", "motion/react"],
+        props: {
+            "CodeBlockSection": [
+                { name: "data", type: "CodeBlockData | CodeBlockData[]", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "defaultOpen", type: "boolean", default: "true" },
+                { name: "variant", type: "\"default\" | \"zinc\"", default: "\"default\"" },
+                { name: "showLineNumbers", type: "boolean", default: "true" },
+                { name: "highlightedLines", type: "number[]", default: "[]" },
+                { name: "showDiff", type: "boolean", default: "false" },
+                { name: "focusedLines", type: "number[]", default: "[]" },
+                { name: "highlightedWords", type: "string[]", default: "[]" },
+            ],
+            "CodeBlock": [
+                { name: "data", type: "CodeBlockData[]", default: "null" },
+                { name: "value", type: "string", default: "null" },
+                { name: "defaultValue", type: "string", default: "null" },
+                { name: "onValueChange", type: "(value: string) => void", default: "null" },
+                { name: "header", type: "boolean | ReactNode", default: "true" },
+                { name: "variant", type: "\"default\" | \"zinc\"", default: "\"default\"" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "CodeBlockData": [
+                { name: "language", type: "string", default: "null" },
+                { name: "filename", type: "string", default: "null" },
+                { name: "code", type: "string", default: "null" },
+            ],
+        },
+        desc: "Note to wise wizards, wise enough to read this. This component covers... virtually every single ",
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Code Editor",
+        value: "code-editor",
+        importPath: "~/components/catalyst-ui/code/code-editor",
+        multiImport: "CodeEditor, CopyButton",
+        basicusage: `<CodeEditor 
+  lang="tsx" 
+  title="component.tsx" 
+  code={\`function Example() {
+  return <div>Hello World</div>;
+}\`}
+/>
+
+<CodeEditor 
+  className="w-[640px] h-[480px]"
+  lang="tsx"
+  title="component.tsx"
+  code={code}
+  duration={15}
+  delay={0.5}
+  cursor={true}
+  copyButton={true}
+  writing={true}
+  header={true}
+  dots={true}
+/>`,
+        path: "/components/catalyst-ui/code/code-editor.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/code-editor.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "editor", "animation", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible", "Animated Typing", "Syntax Highlighting", "Theme Support"],
+        dependencies: ["lucide-react", "react", "motion/react", "shiki"],
+        props: {
+            "CodeEditor": [
+                { name: "code", type: "string", default: "null" },
+                { name: "lang", type: "string", default: "null" },
+                { name: "title", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "themes", type: "{ light: string; dark: string }", default: "{ light: 'github-light', dark: 'github-dark' }" },
+                { name: "duration", type: "number", default: "15" },
+                { name: "delay", type: "number", default: "0.5" },
+                { name: "header", type: "boolean", default: "true" },
+                { name: "dots", type: "boolean", default: "true" },
+                { name: "icon", type: "React.ReactNode", default: "<Code />" },
+                { name: "cursor", type: "boolean", default: "true" },
+                { name: "inView", type: "boolean", default: "false" },
+                { name: "inViewMargin", type: "string", default: "\"0px\"" },
+                { name: "inViewOnce", type: "boolean", default: "true" },
+                { name: "copyButton", type: "boolean", default: "true" },
+                { name: "writing", type: "boolean", default: "true" },
+                { name: "onDone", type: "() => void", default: "null" },
+                { name: "onCopy", type: "(content: string) => void", default: "null" },
+            ],
+            "CopyButton": [
+                { name: "content", type: "string", default: "null" },
+                { name: "size", type: "\"sm\" | \"default\" | \"lg\"", default: "\"default\"" },
+                { name: "variant", type: "\"default\" | \"ghost\" | \"outline\"", default: "\"default\"" },
+                { name: "className", type: "string", default: "null" },
+                { name: "onCopy", type: "(content: string) => void", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Code Section",
+        value: "code-section",
+        importPath: "~/components/catalyst-ui/code/code-section",
+        multiImport: null,
+        basicusage: `<Code>console.log('Hello World')</Code>
+
+<Code variant="primary">const x = 42</Code>
+
+<Code variant="success" className="text-lg">
+  success()
+</Code>`,
+        path: "/components/catalyst-ui/code/code-section.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/code-section.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "typography", "inline"],
+        features: ["Responsive", "TypeScript", "Accessible", "Multiple Variants"],
+        dependencies: ["react"],
+        props: {
+            "Code": [
+                { name: "children", type: "React.ReactNode", default: "null" },
+                { name: "variant", type: "\"default\" | \"muted\" | \"primary\" | \"secondary\" | \"destructive\" | \"success\" | \"warning\" | \"info\"", default: "\"default\"" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Css Section",
+        value: "css-section",
+        importPath: "~/components/catalyst-ui/code/css-section",
+        multiImport: null,
+        basicusage: `<CssSection 
+  code={\`
+.container {
+  display: flex;
+  width: 100%;
+}
+\`}
+  title="styles.css"
+/>
+
+<CssSection 
+  code={cssCode}
+  title="Custom Styles"
+  note="These styles define the main layout components."
+  noteItems={[
+    "Responsive design included",
+    "Uses CSS Grid and Flexbox",
+    "Dark mode support"
+  ]}
+/>`,
+        path: "/components/catalyst-ui/code/css-section.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/css-section.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "css", "syntax-highlighting", "documentation"],
+        features: ["Responsive", "TypeScript", "Syntax Highlighting", "Copy to Clipboard", "Export Functionality"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "CssSection": [
+                { name: "code", type: "string", default: "null" },
+                { name: "title", type: "string", default: "\"tailwind\"" },
+                { name: "note", type: "string", default: "null" },
+                { name: "noteItems", type: "string[]", default: "null" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Html Section",
+        value: "html-section",
+        importPath: "~/components/catalyst-ui/code/html-section",
+        multiImport: null,
+        basicusage: `<Html 
+  code={\`<div class="container">
+  <h1>Hello World</h1>
+  <p>Welcome to my website</p>
+</div>\`}
+  title="example.html"
+/>
+
+<Html 
+  code={htmlCode}
+  title="Component Template"
+  note="This HTML structure uses semantic elements for better accessibility."
+  noteItems={[
+    "Uses semantic HTML5 elements",
+    "Includes ARIA attributes",
+    "Responsive design ready"
+  ]}
+/>`,
+        path: "/components/catalyst-ui/code/html-section.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/html-section.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "html", "syntax-highlighting", "documentation"],
+        features: ["Responsive", "TypeScript", "Syntax Highlighting", "Copy to Clipboard", "Export Functionality"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "Html": [
+                { name: "code", type: "string", default: "null" },
+                { name: "title", type: "string", default: "\"HTML\"" },
+                { name: "note", type: "string", default: "null" },
+                { name: "noteItems", type: "string[]", default: "null" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Display Install Code",
+        value: "display-install-code",
+        importPath: "~/components/catalyst-ui/code/display-install-code",
+        multiImport: null,
+        basicusage: `<DisplayInstallCode 
+  title="Install React"
+  libModule="react"
+/>
+
+<DisplayInstallCode 
+  title="Add Dependencies"
+  libModule="@myorg/ui-library"
+  desc="This library provides a complete set of UI components for React applications."
+/>`,
+        path: "/components/catalyst-ui/code/display-install-code.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/display-install-code.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "installation", "package-manager", "interactive"],
+        features: ["Responsive", "TypeScript", "Interactive", "Multiple Package Managers", "Copy to Clipboard"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "DisplayInstallCode": [
+                { name: "title", type: "string", default: "\"Install\"" },
+                { name: "libModule", type: "string", default: "\"devstack\"" },
+                { name: "desc", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Display Install Code Array",
+        value: "display-install-code-array",
+        importPath: "~/components/catalyst-ui/code/display-install-code-array",
+        multiImport: null,
+        basicusage: `<DisplayInstallCodeArray 
+  title="React Dependencies"
+  libModule={['react', 'react-dom', '@types/react']}
+/>
+
+<DisplayInstallCodeArray 
+  title="Development Tools"
+  libModule={['typescript', 'eslint', 'prettier']}
+  desc="Essential development dependencies for modern web development."
+/>`,
+        path: "/components/catalyst-ui/code/display-install-code-array.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/display-install-code-array.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "installation", "package-manager", "interactive", "multiple-packages"],
+        features: ["Responsive", "TypeScript", "Interactive", "Multiple Package Managers", "Copy to Clipboard", "Array Support"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "DisplayInstallCodeArray": [
+                { name: "title", type: "string", default: "\"Prerequisites\"" },
+                { name: "libModule", type: "string | string[]", default: "[]" },
+                { name: "desc", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Display Github Install",
+        value: "display-github-install",
+        importPath: "~/components/catalyst-ui/code/display-github-install",
+        multiImport: null,
+        basicusage: `<DisplayGithubInstall />
+
+<DisplayGithubInstall 
+  title="Download Project"
+  libModule="my-repo"
+  owner="username"
+/>
+
+<DisplayGithubInstall 
+  title="Clone Repository"
+  libModule="awesome-project"
+  owner="organization"
+  desc="Clone this repository to get started with the project setup."
+/>`,
+        path: "/components/catalyst-ui/code/display-github-install.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/display-github-install.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "github", "git", "clone", "interactive"],
+        features: ["Responsive", "TypeScript", "Interactive", "Multiple Clone Methods", "Copy to Clipboard"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "DisplayGithubInstall": [
+                { name: "title", type: "string", default: "\"Clone\"" },
+                { name: "libModule", type: "string", default: "\"NTRSync-Mobile\"" },
+                { name: "owner", type: "string", default: "\"8an3\"" },
+                { name: "desc", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Json Section",
+        value: "json-section",
+        importPath: "~/components/catalyst-ui/code/json-section",
+        multiImport: null,
+        basicusage: `<JsonSection items={configObject} />
+
+<JsonSection 
+  title="Configuration"
+  items={settings}
+  note="This configuration object defines the application settings."
+/>
+
+<JsonSection 
+  title="API Schema"
+  items={apiSchema}
+  noteItems={[
+    "All fields are required unless marked optional",
+    "Dates should be in ISO 8601 format",
+    "Strings have a maximum length of 255 characters"
+  ]}
+  icon={<AlertTriangle className="w-4 h-4 text-yellow-500" />}
+/>`,
+        path: "/components/catalyst-ui/code/json-section.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/json-section.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "json", "configuration", "documentation"],
+        features: ["Responsive", "TypeScript", "JSON Formatting", "Copy to Clipboard", "Error Handling"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "JsonSection": [
+                { name: "items", type: "any", default: "null" },
+                { name: "title", type: "string", default: "\"Configuration\"" },
+                { name: "note", type: "string", default: "null" },
+                { name: "noteItems", type: "string[]", default: "null" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Props Code",
+        value: "props-code",
+        importPath: "~/components/catalyst-ui/code/props-code",
+        multiImport: "PropsCode, PropsCopyButton, PropsCopyButtonGroup, AllProps, BasicAllProps",
+        basicusage: `<PropsCode props={componentProps} name="Button" />
+
+<PropsCode 
+  props={{
+    Button: [
+      { name: "variant", type: "string", default: "default" },
+      { name: "size", type: "string", default: "md" }
+    ],
+    ButtonGroup: [
+      { name: "orientation", type: "string", default: "horizontal" }
+    ]
+  }} 
+  name="Button Components"
+/>`,
+        path: "/components/catalyst-ui/code/props-code.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/props-code.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "props", "documentation", "interactive"],
+        features: ["Responsive", "TypeScript", "Interactive", "Copy to Clipboard", "Collapsible", "Multiple Components"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "PropsCode": [
+                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "[]" },
+                { name: "name", type: "string", default: "\"Calendar\"" },
+            ],
+            "PropsCopyButton": [
+                { name: "componentName", type: "string", default: "null" },
+                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "PropsCopyButtonGroup": [
+                { name: "componentName", type: "string", default: "null" },
+                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+            "AllProps": [
+                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "[]" },
+                { name: "name", type: "string", default: "\"Calendar\"" },
+            ],
+            "BasicAllProps": [
+                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "[]" },
+                { name: "name", type: "string", default: "\"Calendar\"" },
+            ],
+            "PropDefinition": [
+                { name: "name", type: "string", default: "null" },
+                { name: "type", type: "string", default: "null" },
+                { name: "default", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Terminal Code",
+        value: "terminal-code",
+        importPath: "~/components/catalyst-ui/code/terminal-code",
+        multiImport: null,
+        basicusage: `<TerminalCode 
+  title="Install Package"
+  code="react"
+  type="install"
+/>
+
+<TerminalCode 
+  title="Create Project"
+  code="next-app"
+  type="create"
+  desc="Create a new Next.js application with this command."
+/>
+
+<TerminalCode 
+  title="Run Script"
+  code="dev"
+  type="npx"
+/>
+
+<TerminalCode 
+  title="Custom Command"
+  code="git commit -m 'Initial commit'"
+  type="custom"
+/>`,
+        path: "/components/catalyst-ui/code/terminal-code.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/terminal-code.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "terminal", "command-line", "interactive"],
+        features: ["Responsive", "TypeScript", "Interactive", "Multiple Package Managers", "Copy to Clipboard", "Multiple Command Types"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "TerminalCode": [
+                { name: "title", type: "string", default: "\"Terminal\"" },
+                { name: "code", type: "string", default: "\"devstack\"" },
+                { name: "desc", type: "string", default: "null" },
+                { name: "type", type: "\"install\" | \"create\" | \"npx\" | \"custom\" | \"CustomViewAll\"", default: "\"install\"" },
+                { name: "global", type: "boolean", default: "true" },
+                { name: "code2", type: "any", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Tsx Section",
+        value: "tsx-section",
+        importPath: "~/components/catalyst-ui/code/tsx-section",
+        multiImport: null,
+        basicusage: `<TsxSection 
+  code={\`function Example() {
+  return <div>Hello World</div>;
+}\`}
+  title="Component Example"
+/>
+
+<TsxSection 
+  code={typescriptCode}
+  title="TypeScript Interface"
+  note="This interface defines the data structure for our API responses."
+  noteItems={[
+    "All fields are required unless marked optional",
+    "Dates should be in ISO 8601 format",
+    "IDs are auto-generated by the database"
+  ]}
+  icon={<Info className="w-4 h-4 text-blue-500" />}
+/>`,
+        path: "/components/catalyst-ui/code/tsx-section.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/code/tsx-section.tsx",
+        usage: null,
+        premium: true,
+        category: "Code",
+        tags: ["ui", "components", "code", "typescript", "react", "documentation"],
+        features: ["Responsive", "TypeScript", "Collapsible", "Copy to Clipboard", "Export Functionality"],
+        dependencies: ["react", "lucide-react"],
+        props: {
+            "TsxSection": [
+                { name: "code", type: "string", default: "null" },
+                { name: "title", type: "string", default: "\"TypeScript Code\"" },
+                { name: "note", type: "string", default: "null" },
+                { name: "noteItems", type: "string[]", default: "null" },
+                { name: "icon", type: "React.ReactNode", default: "null" },
+                { name: "language", type: "string", default: "\"tsx\"" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+];