@shipfox/react-ui 0.3.0 → 0.4.0

package/dist/components/code-block/code-block.stories.js

@@ -0,0 +1,341 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockFiles, CodeBlockFooter, CodeBlockHeader, CodeBlockItem } from '../../components/code-block/index.js';
+import { CodeTabs } from '../../components/code-block/code-tabs.js';
+const meta = {
+    title: 'Components/CodeBlock',
+    component: CodeBlock,
+    parameters: {
+        layout: 'padded'
+    }
+};
+export default meta;
+const exampleCode = `jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Build
+        run: npm run build`;
+const diffCode = `jobs:
+  build:
+        - runs-on: ubuntu-latest
+        + runs-on: shipfox-2vcpu-ubuntu-2404`;
+export const Default = {
+    args: {
+        data: [
+            {
+                language: 'yaml',
+                filename: '.github/workflows/<workflow-name>.yml',
+                code: exampleCode
+            }
+        ],
+        defaultValue: 'yaml'
+    },
+    render: (args)=>/*#__PURE__*/ _jsxs(CodeBlock, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                            children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                    value: item.language,
+                                    children: item.filename
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CodeBlockBody, {
+                    children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                            value: item.language,
+                            children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                language: item.language,
+                                children: item.code
+                            })
+                        })
+                })
+            ]
+        })
+};
+export const WithDiff = {
+    args: {
+        data: [
+            {
+                language: 'yaml',
+                filename: '.github/workflows/<workflow-name>.yml',
+                code: diffCode
+            }
+        ],
+        defaultValue: 'yaml'
+    },
+    render: (args)=>/*#__PURE__*/ _jsxs(CodeBlock, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                            children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                    value: item.language,
+                                    children: item.filename
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CodeBlockBody, {
+                    children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                            value: item.language,
+                            children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                language: item.language,
+                                children: item.code
+                            })
+                        })
+                })
+            ]
+        })
+};
+export const WithFooterRunning = {
+    args: {
+        data: [
+            {
+                language: 'yaml',
+                filename: '.github/workflows/<workflow-name>.yml',
+                code: diffCode
+            }
+        ],
+        defaultValue: 'yaml'
+    },
+    render: (args)=>/*#__PURE__*/ _jsxs(CodeBlock, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                            children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                    value: item.language,
+                                    children: item.filename
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CodeBlockBody, {
+                    children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                            value: item.language,
+                            children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                language: item.language,
+                                children: item.code
+                            })
+                        })
+                }),
+                /*#__PURE__*/ _jsx(CodeBlockFooter, {
+                    state: "running",
+                    message: "Waiting for Shipfox runner event…",
+                    description: "This usually takes 30-60 seconds after you commit the workflow file."
+                })
+            ]
+        })
+};
+export const WithFooterDone = {
+    args: {
+        data: [
+            {
+                language: 'yaml',
+                filename: '.github/workflows/<workflow-name>.yml',
+                code: diffCode
+            }
+        ],
+        defaultValue: 'yaml'
+    },
+    render: (args)=>/*#__PURE__*/ _jsxs(CodeBlock, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                            children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                    value: item.language,
+                                    children: item.filename
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CodeBlockBody, {
+                    children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                            value: item.language,
+                            children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                language: item.language,
+                                children: item.code
+                            })
+                        })
+                }),
+                /*#__PURE__*/ _jsx(CodeBlockFooter, {
+                    state: "done",
+                    message: "Runner connected!"
+                })
+            ]
+        })
+};
+const multipleFilesCode = {
+    'src/utils/format.ts': `export function formatDate(date: Date): string {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(date);
+}
+
+export function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(amount);
+}`,
+    'src/api/client.ts': `import type {User} from './types';
+
+export class ApiClient {
+  private baseUrl: string;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
+  }
+
+  async getUser(id: string): Promise<User> {
+    const response = await fetch(\`\${this.baseUrl}/users/\${id}\`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch user');
+    }
+    return response.json();
+  }
+}`,
+    'src/components/Button.tsx': `import type {ComponentProps} from 'react';
+
+export function Button({
+  children,
+  variant = 'primary',
+  ...props
+}: ComponentProps<'button'> & {
+  variant?: 'primary' | 'secondary';
+}) {
+  return (
+    <button
+      className={\`btn btn-\${variant}\`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}`
+};
+export const MultipleFiles = {
+    args: {
+        data: [],
+        defaultValue: ''
+    },
+    render: ()=>/*#__PURE__*/ _jsx(CodeTabs, {
+            codes: multipleFilesCode,
+            defaultValue: "src/api/client.ts",
+            syntaxHighlighting: true,
+            lang: "typescript",
+            lineNumbers: true
+        })
+};
+export const WithoutLineNumbers = {
+    args: {
+        data: [
+            {
+                language: 'yaml',
+                filename: '.github/workflows/<workflow-name>.yml',
+                code: exampleCode
+            }
+        ],
+        defaultValue: 'yaml'
+    },
+    render: (args)=>/*#__PURE__*/ _jsxs(CodeBlock, {
+            ...args,
+            children: [
+                /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                            children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                    value: item.language,
+                                    children: item.filename
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CodeBlockBody, {
+                    children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                            value: item.language,
+                            lineNumbers: false,
+                            children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                language: item.language,
+                                children: item.code
+                            })
+                        })
+                })
+            ]
+        })
+};
+const npmCode = `npm install @shipfox/tooling`;
+const yarnCode = `yarn add @shipfox/tooling`;
+const pnpmCode = `pnpm add @shipfox/tooling`;
+export const Snippet = {
+    args: {
+        data: [],
+        defaultValue: ''
+    },
+    render: ()=>/*#__PURE__*/ _jsx(CodeTabs, {
+            codes: {
+                npm: npmCode,
+                yarn: yarnCode,
+                pnpm: pnpmCode
+            },
+            defaultValue: "npm"
+        })
+};
+const syntaxHighlightingCode = {
+    'index.ts': `export function hello(name: string = 'World'): void {
+  // Say hello to the provided name
+  console.log(\`Hello, \${name}!\`);
+}
+
+export function greetEveryone(names: string[]): void {
+  for (const name of names) {
+    hello(name);
+  }
+}
+
+export type Greeting = {
+  language: string;
+  message: string;
+};
+
+export const greetings: Greeting[] = [
+  { language: 'en', message: 'Hello' },
+  { language: 'fr', message: 'Bonjour' },
+  { language: 'es', message: 'Hola' },
+  { language: 'de', message: 'Hallo' },
+];
+
+export function printGreetings(): void {
+  for (const { language, message } of greetings) {
+    console.log(\`\${message}, \${language}!\`);
+  }
+}`
+};
+export const SyntaxHighlighting = {
+    args: {
+        codes: syntaxHighlightingCode,
+        defaultValue: 'index.ts',
+        syntaxHighlighting: true,
+        lang: 'typescript'
+    },
+    render: (args)=>/*#__PURE__*/ _jsx(CodeTabs, {
+            ...args
+        })
+};
+
+//# sourceMappingURL=code-block.stories.js.map

package/dist/components/code-block/code-block.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block/code-block.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {\n  CodeBlock,\n  CodeBlockBody,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFilename,\n  CodeBlockFiles,\n  CodeBlockFooter,\n  CodeBlockHeader,\n  CodeBlockItem,\n} from 'components/code-block';\nimport {CodeTabs} from 'components/code-block/code-tabs';\n\nconst meta = {\n  title: 'Components/CodeBlock',\n  component: CodeBlock,\n  parameters: {\n    layout: 'padded',\n  },\n} satisfies Meta<typeof CodeBlock>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst exampleCode = `jobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - name: Build\n        run: npm run build`;\n\nconst diffCode = `jobs:\n  build:\n        - runs-on: ubuntu-latest\n        + runs-on: shipfox-2vcpu-ubuntu-2404`;\n\nexport const Default: Story = {\n  args: {\n    data: [\n      {\n        language: 'yaml',\n        filename: '.github/workflows/<workflow-name>.yml',\n        code: exampleCode,\n      },\n    ],\n    defaultValue: 'yaml',\n  },\n  render: (args) => (\n    <CodeBlock {...args}>\n      <CodeBlockHeader>\n        <CodeBlockFiles>\n          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}\n        </CodeBlockFiles>\n        <CodeBlockCopyButton />\n      </CodeBlockHeader>\n      <CodeBlockBody>\n        {(item) => (\n          <CodeBlockItem value={item.language}>\n            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n          </CodeBlockItem>\n        )}\n      </CodeBlockBody>\n    </CodeBlock>\n  ),\n};\n\nexport const WithDiff: Story = {\n  args: {\n    data: [\n      {\n        language: 'yaml',\n        filename: '.github/workflows/<workflow-name>.yml',\n        code: diffCode,\n      },\n    ],\n    defaultValue: 'yaml',\n  },\n  render: (args) => (\n    <CodeBlock {...args}>\n      <CodeBlockHeader>\n        <CodeBlockFiles>\n          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}\n        </CodeBlockFiles>\n        <CodeBlockCopyButton />\n      </CodeBlockHeader>\n      <CodeBlockBody>\n        {(item) => (\n          <CodeBlockItem value={item.language}>\n            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n          </CodeBlockItem>\n        )}\n      </CodeBlockBody>\n    </CodeBlock>\n  ),\n};\n\nexport const WithFooterRunning: Story = {\n  args: {\n    data: [\n      {\n        language: 'yaml',\n        filename: '.github/workflows/<workflow-name>.yml',\n        code: diffCode,\n      },\n    ],\n    defaultValue: 'yaml',\n  },\n  render: (args) => (\n    <CodeBlock {...args}>\n      <CodeBlockHeader>\n        <CodeBlockFiles>\n          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}\n        </CodeBlockFiles>\n        <CodeBlockCopyButton />\n      </CodeBlockHeader>\n      <CodeBlockBody>\n        {(item) => (\n          <CodeBlockItem value={item.language}>\n            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n          </CodeBlockItem>\n        )}\n      </CodeBlockBody>\n      <CodeBlockFooter\n        state=\"running\"\n        message=\"Waiting for Shipfox runner event…\"\n        description=\"This usually takes 30-60 seconds after you commit the workflow file.\"\n      />\n    </CodeBlock>\n  ),\n};\n\nexport const WithFooterDone: Story = {\n  args: {\n    data: [\n      {\n        language: 'yaml',\n        filename: '.github/workflows/<workflow-name>.yml',\n        code: diffCode,\n      },\n    ],\n    defaultValue: 'yaml',\n  },\n  render: (args) => (\n    <CodeBlock {...args}>\n      <CodeBlockHeader>\n        <CodeBlockFiles>\n          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}\n        </CodeBlockFiles>\n        <CodeBlockCopyButton />\n      </CodeBlockHeader>\n      <CodeBlockBody>\n        {(item) => (\n          <CodeBlockItem value={item.language}>\n            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n          </CodeBlockItem>\n        )}\n      </CodeBlockBody>\n      <CodeBlockFooter state=\"done\" message=\"Runner connected!\" />\n    </CodeBlock>\n  ),\n};\n\nconst multipleFilesCode = {\n  'src/utils/format.ts': `export function formatDate(date: Date): string {\n  return new Intl.DateTimeFormat('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  }).format(date);\n}\n\nexport function formatCurrency(amount: number): string {\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: 'USD',\n  }).format(amount);\n}`,\n  'src/api/client.ts': `import type {User} from './types';\n\nexport class ApiClient {\n  private baseUrl: string;\n\n  constructor(baseUrl: string) {\n    this.baseUrl = baseUrl;\n  }\n\n  async getUser(id: string): Promise<User> {\n    const response = await fetch(\\`\\${this.baseUrl}/users/\\${id}\\`);\n    if (!response.ok) {\n      throw new Error('Failed to fetch user');\n    }\n    return response.json();\n  }\n}`,\n  'src/components/Button.tsx': `import type {ComponentProps} from 'react';\n\nexport function Button({\n  children,\n  variant = 'primary',\n  ...props\n}: ComponentProps<'button'> & {\n  variant?: 'primary' | 'secondary';\n}) {\n  return (\n    <button\n      className={\\`btn btn-\\${variant}\\`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}`,\n};\n\nexport const MultipleFiles: Story = {\n  args: {\n    data: [],\n    defaultValue: '',\n  },\n  render: () => (\n    <CodeTabs\n      codes={multipleFilesCode}\n      defaultValue=\"src/api/client.ts\"\n      syntaxHighlighting={true}\n      lang=\"typescript\"\n      lineNumbers={true}\n    />\n  ),\n};\n\nexport const WithoutLineNumbers: Story = {\n  args: {\n    data: [\n      {\n        language: 'yaml',\n        filename: '.github/workflows/<workflow-name>.yml',\n        code: exampleCode,\n      },\n    ],\n    defaultValue: 'yaml',\n  },\n  render: (args) => (\n    <CodeBlock {...args}>\n      <CodeBlockHeader>\n        <CodeBlockFiles>\n          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}\n        </CodeBlockFiles>\n        <CodeBlockCopyButton />\n      </CodeBlockHeader>\n      <CodeBlockBody>\n        {(item) => (\n          <CodeBlockItem value={item.language} lineNumbers={false}>\n            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n          </CodeBlockItem>\n        )}\n      </CodeBlockBody>\n    </CodeBlock>\n  ),\n};\n\nconst npmCode = `npm install @shipfox/tooling`;\nconst yarnCode = `yarn add @shipfox/tooling`;\nconst pnpmCode = `pnpm add @shipfox/tooling`;\n\nexport const Snippet: Story = {\n  args: {\n    data: [],\n    defaultValue: '',\n  },\n  render: () => (\n    <CodeTabs\n      codes={{\n        npm: npmCode,\n        yarn: yarnCode,\n        pnpm: pnpmCode,\n      }}\n      defaultValue=\"npm\"\n    />\n  ),\n};\n\nconst syntaxHighlightingCode = {\n  'index.ts': `export function hello(name: string = 'World'): void {\n  // Say hello to the provided name\n  console.log(\\`Hello, \\${name}!\\`);\n}\n\nexport function greetEveryone(names: string[]): void {\n  for (const name of names) {\n    hello(name);\n  }\n}\n\nexport type Greeting = {\n  language: string;\n  message: string;\n};\n\nexport const greetings: Greeting[] = [\n  { language: 'en', message: 'Hello' },\n  { language: 'fr', message: 'Bonjour' },\n  { language: 'es', message: 'Hola' },\n  { language: 'de', message: 'Hallo' },\n];\n\nexport function printGreetings(): void {\n  for (const { language, message } of greetings) {\n    console.log(\\`\\${message}, \\${language}!\\`);\n  }\n}`,\n};\n\nexport const SyntaxHighlighting: StoryObj<typeof CodeTabs> = {\n  args: {\n    codes: syntaxHighlightingCode,\n    defaultValue: 'index.ts',\n    syntaxHighlighting: true,\n    lang: 'typescript',\n  },\n  render: (args) => <CodeTabs {...args} />,\n};\n"],"names":["CodeBlock","CodeBlockBody","CodeBlockContent","CodeBlockCopyButton","CodeBlockFilename","CodeBlockFiles","CodeBlockFooter","CodeBlockHeader","CodeBlockItem","CodeTabs","meta","title","component","parameters","layout","exampleCode","diffCode","Default","args","data","language","filename","code","defaultValue","render","item","value","WithDiff","WithFooterRunning","state","message","description","WithFooterDone","multipleFilesCode","MultipleFiles","codes","syntaxHighlighting","lang","lineNumbers","WithoutLineNumbers","npmCode","yarnCode","pnpmCode","Snippet","npm","yarn","pnpm","syntaxHighlightingCode","SyntaxHighlighting"],"mappings":";AACA,SACEA,SAAS,EACTC,aAAa,EACbC,gBAAgB,EAChBC,mBAAmB,EACnBC,iBAAiB,EACjBC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,aAAa,QACR,wBAAwB;AAC/B,SAAQC,QAAQ,QAAO,kCAAkC;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWZ;IACXa,YAAY;QACVC,QAAQ;IACV;AACF;AAEA,eAAeJ,KAAK;AAGpB,MAAMK,cAAc,CAAC;;;;;;0BAMK,CAAC;AAE3B,MAAMC,WAAW,CAAC;;;4CAG0B,CAAC;AAE7C,OAAO,MAAMC,UAAiB;IAC5BC,MAAM;QACJC,MAAM;YACJ;gBACEC,UAAU;gBACVC,UAAU;gBACVC,MAAMP;YACR;SACD;QACDQ,cAAc;IAChB;IACAC,QAAQ,CAACN,qBACP,MAAClB;YAAW,GAAGkB,IAAI;;8BACjB,MAACX;;sCACC,KAACF;sCACE,CAACoB,qBAAS,KAACrB;oCAAkBsB,OAAOD,KAAKL,QAAQ;8CAAGK,KAAKJ,QAAQ;;;sCAEpE,KAAClB;;;8BAEH,KAACF;8BACE,CAACwB,qBACA,KAACjB;4BAAckB,OAAOD,KAAKL,QAAQ;sCACjC,cAAA,KAAClB;gCAAiBkB,UAAUK,KAAKL,QAAQ;0CAAGK,KAAKH,IAAI;;;;;;AAMjE,EAAE;AAEF,OAAO,MAAMK,WAAkB;IAC7BT,MAAM;QACJC,MAAM;YACJ;gBACEC,UAAU;gBACVC,UAAU;gBACVC,MAAMN;YACR;SACD;QACDO,cAAc;IAChB;IACAC,QAAQ,CAACN,qBACP,MAAClB;YAAW,GAAGkB,IAAI;;8BACjB,MAACX;;sCACC,KAACF;sCACE,CAACoB,qBAAS,KAACrB;oCAAkBsB,OAAOD,KAAKL,QAAQ;8CAAGK,KAAKJ,QAAQ;;;sCAEpE,KAAClB;;;8BAEH,KAACF;8BACE,CAACwB,qBACA,KAACjB;4BAAckB,OAAOD,KAAKL,QAAQ;sCACjC,cAAA,KAAClB;gCAAiBkB,UAAUK,KAAKL,QAAQ;0CAAGK,KAAKH,IAAI;;;;;;AAMjE,EAAE;AAEF,OAAO,MAAMM,oBAA2B;IACtCV,MAAM;QACJC,MAAM;YACJ;gBACEC,UAAU;gBACVC,UAAU;gBACVC,MAAMN;YACR;SACD;QACDO,cAAc;IAChB;IACAC,QAAQ,CAACN,qBACP,MAAClB;YAAW,GAAGkB,IAAI;;8BACjB,MAACX;;sCACC,KAACF;sCACE,CAACoB,qBAAS,KAACrB;oCAAkBsB,OAAOD,KAAKL,QAAQ;8CAAGK,KAAKJ,QAAQ;;;sCAEpE,KAAClB;;;8BAEH,KAACF;8BACE,CAACwB,qBACA,KAACjB;4BAAckB,OAAOD,KAAKL,QAAQ;sCACjC,cAAA,KAAClB;gCAAiBkB,UAAUK,KAAKL,QAAQ;0CAAGK,KAAKH,IAAI;;;;8BAI3D,KAAChB;oBACCuB,OAAM;oBACNC,SAAQ;oBACRC,aAAY;;;;AAIpB,EAAE;AAEF,OAAO,MAAMC,iBAAwB;IACnCd,MAAM;QACJC,MAAM;YACJ;gBACEC,UAAU;gBACVC,UAAU;gBACVC,MAAMN;YACR;SACD;QACDO,cAAc;IAChB;IACAC,QAAQ,CAACN,qBACP,MAAClB;YAAW,GAAGkB,IAAI;;8BACjB,MAACX;;sCACC,KAACF;sCACE,CAACoB,qBAAS,KAACrB;oCAAkBsB,OAAOD,KAAKL,QAAQ;8CAAGK,KAAKJ,QAAQ;;;sCAEpE,KAAClB;;;8BAEH,KAACF;8BACE,CAACwB,qBACA,KAACjB;4BAAckB,OAAOD,KAAKL,QAAQ;sCACjC,cAAA,KAAClB;gCAAiBkB,UAAUK,KAAKL,QAAQ;0CAAGK,KAAKH,IAAI;;;;8BAI3D,KAAChB;oBAAgBuB,OAAM;oBAAOC,SAAQ;;;;AAG5C,EAAE;AAEF,MAAMG,oBAAoB;IACxB,uBAAuB,CAAC;;;;;;;;;;;;;CAazB,CAAC;IACA,qBAAqB,CAAC;;;;;;;;;;;;;;;;CAgBvB,CAAC;IACA,6BAA6B,CAAC;;;;;;;;;;;;;;;;;CAiB/B,CAAC;AACF;AAEA,OAAO,MAAMC,gBAAuB;IAClChB,MAAM;QACJC,MAAM,EAAE;QACRI,cAAc;IAChB;IACAC,QAAQ,kBACN,KAACf;YACC0B,OAAOF;YACPV,cAAa;YACba,oBAAoB;YACpBC,MAAK;YACLC,aAAa;;AAGnB,EAAE;AAEF,OAAO,MAAMC,qBAA4B;IACvCrB,MAAM;QACJC,MAAM;YACJ;gBACEC,UAAU;gBACVC,UAAU;gBACVC,MAAMP;YACR;SACD;QACDQ,cAAc;IAChB;IACAC,QAAQ,CAACN,qBACP,MAAClB;YAAW,GAAGkB,IAAI;;8BACjB,MAACX;;sCACC,KAACF;sCACE,CAACoB,qBAAS,KAACrB;oCAAkBsB,OAAOD,KAAKL,QAAQ;8CAAGK,KAAKJ,QAAQ;;;sCAEpE,KAAClB;;;8BAEH,KAACF;8BACE,CAACwB,qBACA,KAACjB;4BAAckB,OAAOD,KAAKL,QAAQ;4BAAEkB,aAAa;sCAChD,cAAA,KAACpC;gCAAiBkB,UAAUK,KAAKL,QAAQ;0CAAGK,KAAKH,IAAI;;;;;;AAMjE,EAAE;AAEF,MAAMkB,UAAU,CAAC,4BAA4B,CAAC;AAC9C,MAAMC,WAAW,CAAC,yBAAyB,CAAC;AAC5C,MAAMC,WAAW,CAAC,yBAAyB,CAAC;AAE5C,OAAO,MAAMC,UAAiB;IAC5BzB,MAAM;QACJC,MAAM,EAAE;QACRI,cAAc;IAChB;IACAC,QAAQ,kBACN,KAACf;YACC0B,OAAO;gBACLS,KAAKJ;gBACLK,MAAMJ;gBACNK,MAAMJ;YACR;YACAnB,cAAa;;AAGnB,EAAE;AAEF,MAAMwB,yBAAyB;IAC7B,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AACF;AAEA,OAAO,MAAMC,qBAAgD;IAC3D9B,MAAM;QACJiB,OAAOY;QACPxB,cAAc;QACda,oBAAoB;QACpBC,MAAM;IACR;IACAb,QAAQ,CAACN,qBAAS,KAACT;YAAU,GAAGS,IAAI;;AACtC,EAAE"}

package/dist/components/code-block/code-content.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+type CodeContentProps = HTMLAttributes<HTMLElement> & {
+    code: string;
+    highlightedCode?: string;
+    isLoading: boolean;
+    syntaxHighlighting: boolean;
+    lineNumbers?: boolean;
+};
+export declare function CodeContent({ code, highlightedCode, isLoading, syntaxHighlighting, lineNumbers, className, ...props }: CodeContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=code-content.d.ts.map

package/dist/components/code-block/code-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-content.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,KAAK,gBAAgB,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAwClB"}

package/dist/components/code-block/code-content.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+export function CodeContent({ code, highlightedCode, isLoading, syntaxHighlighting, lineNumbers = false, className, ...props }) {
+    const shouldShowHighlighted = syntaxHighlighting && !isLoading && highlightedCode;
+    if (shouldShowHighlighted) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn('shiki-override w-full overflow-x-auto font-code [&_pre]:m-0 [&_pre]:p-0 [&_pre]:bg-transparent [&_pre]:font-code [&_code]:font-code [&_code]:bg-transparent [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base [&_code]:grid', lineNumbers && '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none', '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:text-xs [&_.line]:leading-20 [&_.line]:min-h-[1.25rem]', className),
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki outputs HTML for syntax highlighting
+            dangerouslySetInnerHTML: {
+                __html: highlightedCode
+            },
+            ...props
+        });
+    }
+    const lines = code.split('\n');
+    return /*#__PURE__*/ _jsx("pre", {
+        className: cn('m-0 p-0 bg-transparent font-code', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx("code", {
+            className: cn('w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base', 'grid', lineNumbers && '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none'),
+            children: lines.map((line)=>/*#__PURE__*/ _jsx("span", {
+                    className: "line px-12 w-full relative font-code text-xs leading-20",
+                    children: line
+                }, line))
+        })
+    });
+}
+
+//# sourceMappingURL=code-content.js.map

package/dist/components/code-block/code-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block/code-content.tsx"],"sourcesContent":["import type {HTMLAttributes} from 'react';\nimport {cn} from 'utils/cn';\n\ntype CodeContentProps = HTMLAttributes<HTMLElement> & {\n  code: string;\n  highlightedCode?: string;\n  isLoading: boolean;\n  syntaxHighlighting: boolean;\n  lineNumbers?: boolean;\n};\n\nexport function CodeContent({\n  code,\n  highlightedCode,\n  isLoading,\n  syntaxHighlighting,\n  lineNumbers = false,\n  className,\n  ...props\n}: CodeContentProps) {\n  const shouldShowHighlighted = syntaxHighlighting && !isLoading && highlightedCode;\n\n  if (shouldShowHighlighted) {\n    return (\n      <div\n        className={cn(\n          'shiki-override w-full overflow-x-auto font-code [&_pre]:m-0 [&_pre]:p-0 [&_pre]:bg-transparent [&_pre]:font-code [&_code]:font-code [&_code]:bg-transparent [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base [&_code]:grid',\n          lineNumbers &&\n            '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n          '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:text-xs [&_.line]:leading-20 [&_.line]:min-h-[1.25rem]',\n          className,\n        )}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki outputs HTML for syntax highlighting\n        dangerouslySetInnerHTML={{__html: highlightedCode}}\n        {...props}\n      />\n    );\n  }\n\n  const lines = code.split('\\n');\n\n  return (\n    <pre className={cn('m-0 p-0 bg-transparent font-code', className)} {...props}>\n      <code\n        className={cn(\n          'w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base',\n          'grid',\n          lineNumbers &&\n            '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n        )}\n      >\n        {lines.map((line) => (\n          <span className=\"line px-12 w-full relative font-code text-xs leading-20\" key={line}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  );\n}\n"],"names":["cn","CodeContent","code","highlightedCode","isLoading","syntaxHighlighting","lineNumbers","className","props","shouldShowHighlighted","div","dangerouslySetInnerHTML","__html","lines","split","pre","map","line","span"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,YAAY,EAC1BC,IAAI,EACJC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,cAAc,KAAK,EACnBC,SAAS,EACT,GAAGC,OACc;IACjB,MAAMC,wBAAwBJ,sBAAsB,CAACD,aAAaD;IAElE,IAAIM,uBAAuB;QACzB,qBACE,KAACC;YACCH,WAAWP,GACT,wPACAM,eACE,gYACF,4JACAC;YAEF,mGAAmG;YACnGI,yBAAyB;gBAACC,QAAQT;YAAe;YAChD,GAAGK,KAAK;;IAGf;IAEA,MAAMK,QAAQX,KAAKY,KAAK,CAAC;IAEzB,qBACE,KAACC;QAAIR,WAAWP,GAAG,oCAAoCO;QAAa,GAAGC,KAAK;kBAC1E,cAAA,KAACN;YACCK,WAAWP,GACT,mGACA,QACAM,eACE;sBAGHO,MAAMG,GAAG,CAAC,CAACC,qBACV,KAACC;oBAAKX,WAAU;8BACbU;mBAD4EA;;;AAOzF"}

package/dist/components/code-block/code-copy-button.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+type CodeCopyButtonProps = Omit<ComponentProps<'button'>, 'onCopy'> & {
+    content: string;
+    onCopy?: (content: string) => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+    children?: React.ReactNode;
+};
+export declare function CodeCopyButton({ content, onCopy, onError, timeout, children, className, ...props }: CodeCopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=code-copy-button.d.ts.map

package/dist/components/code-block/code-copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAI1C,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAkDrB"}

package/dist/components/code-block/code-copy-button.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../../components/icon/index.js';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.js';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+export function CodeCopyButton({ content, onCopy, onError, timeout = 2000, children, className, ...props }) {
+    const [isCopied, setIsCopied] = useState(false);
+    const timeoutRef = useRef(undefined);
+    const { copy } = useCopyToClipboard({
+        text: content,
+        onCopy: ()=>{
+            setIsCopied(true);
+            onCopy?.(content);
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(()=>{
+                setIsCopied(false);
+            }, timeout);
+        }
+    });
+    useEffect(()=>{
+        return ()=>{
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const handleClick = async ()=>{
+        try {
+            await copy();
+        } catch (error) {
+            onError?.(error instanceof Error ? error : new Error('Failed to copy'));
+        }
+    };
+    return /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        "aria-label": isCopied ? 'Copied' : 'Copy to clipboard',
+        className: cn('flex shrink-0 cursor-pointer items-center justify-center rounded-6 bg-transparent text-foreground-neutral-muted transition-colors hover:bg-background-components-hover active:bg-background-components-pressed p-4', className),
+        onClick: handleClick,
+        ...props,
+        children: children ?? /*#__PURE__*/ _jsx(Icon, {
+            name: isCopied ? 'check' : 'copy',
+            className: "size-16"
+        })
+    });
+}
+
+//# sourceMappingURL=code-copy-button.js.map

package/dist/components/code-block/code-copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block/code-copy-button.tsx"],"sourcesContent":["import {Icon} from 'components/icon';\nimport {useCopyToClipboard} from 'hooks/useCopyToClipboard';\nimport type {ComponentProps} from 'react';\nimport {useEffect, useRef, useState} from 'react';\nimport {cn} from 'utils/cn';\n\ntype CodeCopyButtonProps = Omit<ComponentProps<'button'>, 'onCopy'> & {\n  content: string;\n  onCopy?: (content: string) => void;\n  onError?: (error: Error) => void;\n  timeout?: number;\n  children?: React.ReactNode;\n};\n\nexport function CodeCopyButton({\n  content,\n  onCopy,\n  onError,\n  timeout = 2000,\n  children,\n  className,\n  ...props\n}: CodeCopyButtonProps) {\n  const [isCopied, setIsCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const {copy} = useCopyToClipboard({\n    text: content,\n    onCopy: () => {\n      setIsCopied(true);\n      onCopy?.(content);\n\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      timeoutRef.current = setTimeout(() => {\n        setIsCopied(false);\n      }, timeout);\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleClick = async () => {\n    try {\n      await copy();\n    } catch (error) {\n      onError?.(error instanceof Error ? error : new Error('Failed to copy'));\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={isCopied ? 'Copied' : 'Copy to clipboard'}\n      className={cn(\n        'flex shrink-0 cursor-pointer items-center justify-center rounded-6 bg-transparent text-foreground-neutral-muted transition-colors hover:bg-background-components-hover active:bg-background-components-pressed p-4',\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {children ?? <Icon name={isCopied ? 'check' : 'copy'} className=\"size-16\" />}\n    </button>\n  );\n}\n"],"names":["Icon","useCopyToClipboard","useEffect","useRef","useState","cn","CodeCopyButton","content","onCopy","onError","timeout","children","className","props","isCopied","setIsCopied","timeoutRef","undefined","copy","text","current","clearTimeout","setTimeout","handleClick","error","Error","button","type","aria-label","onClick","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,kBAAkB;AACrC,SAAQC,kBAAkB,QAAO,2BAA2B;AAE5D,SAAQC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAClD,SAAQC,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,eAAe,EAC7BC,OAAO,EACPC,MAAM,EACNC,OAAO,EACPC,UAAU,IAAI,EACdC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACiB;IACpB,MAAM,CAACC,UAAUC,YAAY,GAAGX,SAAS;IACzC,MAAMY,aAAab,OAAkDc;IAErE,MAAM,EAACC,IAAI,EAAC,GAAGjB,mBAAmB;QAChCkB,MAAMZ;QACNC,QAAQ;YACNO,YAAY;YACZP,SAASD;YAET,IAAIS,WAAWI,OAAO,EAAE;gBACtBC,aAAaL,WAAWI,OAAO;YACjC;YAEAJ,WAAWI,OAAO,GAAGE,WAAW;gBAC9BP,YAAY;YACd,GAAGL;QACL;IACF;IAEAR,UAAU;QACR,OAAO;YACL,IAAIc,WAAWI,OAAO,EAAE;gBACtBC,aAAaL,WAAWI,OAAO;YACjC;QACF;IACF,GAAG,EAAE;IAEL,MAAMG,cAAc;QAClB,IAAI;YACF,MAAML;QACR,EAAE,OAAOM,OAAO;YACdf,UAAUe,iBAAiBC,QAAQD,QAAQ,IAAIC,MAAM;QACvD;IACF;IAEA,qBACE,KAACC;QACCC,MAAK;QACLC,cAAYd,WAAW,WAAW;QAClCF,WAAWP,GACT,sNACAO;QAEFiB,SAASN;QACR,GAAGV,KAAK;kBAERF,0BAAY,KAACX;YAAK8B,MAAMhB,WAAW,UAAU;YAAQF,WAAU;;;AAGtE"}

package/dist/components/code-block/code-tabs.d.ts

@@ -0,0 +1,16 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import type { ComponentProps } from 'react';
+export type CodeTabsProps = Omit<ComponentProps<typeof Tabs.Root>, 'children'> & {
+    codes: Record<string, string>;
+    lang?: string;
+    themes?: {
+        light: string;
+        dark: string;
+    };
+    copyButton?: boolean;
+    onCopy?: (content: string) => void;
+    syntaxHighlighting?: boolean;
+    lineNumbers?: boolean;
+};
+export declare function CodeTabs({ codes, lang, themes, className, defaultValue, value: controlledValue, onValueChange: controlledOnValueChange, copyButton, onCopy, syntaxHighlighting, lineNumbers, ...props }: CodeTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=code-tabs.d.ts.map

package/dist/components/code-block/code-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAC;AAO7C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAI1C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqGF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAa,EACb,MAGC,EACD,SAAS,EACT,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EAAE,uBAAuB,EACtC,UAAiB,EACjB,MAAM,EACN,kBAA0B,EAC1B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,2CA8Bf"}

package/dist/components/code-block/code-tabs.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Tabs from '@radix-ui/react-tabs';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { CodeContent } from '../../components/code-block/code-content.js';
+import { CodeCopyButton } from '../../components/code-block/code-copy-button.js';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme.js';
+import { useShikiHighlightMultiple } from '../../hooks/useShikiHighlight.js';
+import { useShikiStyleInjection } from '../../hooks/useShikiStyleInjection.js';
+import { useMemo } from 'react';
+import { cn } from '../../utils/cn.js';
+function CodeTabsContent({ codes, lang = 'bash', themes = {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark'
+}, copyButton = true, onCopy, syntaxHighlighting = false, lineNumbers = false, activeValue }) {
+    const resolvedTheme = useResolvedTheme();
+    const codesKeys = useMemo(()=>Object.keys(codes), [
+        codes
+    ]);
+    useShikiStyleInjection(syntaxHighlighting);
+    const { highlightedCodes, isLoading } = useShikiHighlightMultiple({
+        codes,
+        lang,
+        themes,
+        resolvedTheme,
+        syntaxHighlighting
+    });
+    const activeCode = codes[activeValue] ?? '';
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Tabs.List, {
+                className: cn('relative flex w-full flex-row items-center justify-between gap-12 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden bg-background-components-pressed dark:bg-background-contrast-base px-16 py-8', 'border-b border-border-contrast-bottom', 'after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px', 'after:bg-border-neutral-base', 'dark:after:bg-border-contrast-top', 'after:shadow-separator-inset'),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex flex-row gap-12",
+                        children: codesKeys.map((code)=>/*#__PURE__*/ _jsx(Tabs.Trigger, {
+                                value: code,
+                                className: cn('relative px-8 py-4 text-xs leading-20 font-medium text-foreground-neutral-muted transition-colors', 'data-[state=active]:text-foreground-neutral-base', 'hover:text-foreground-neutral-base', 'data-[state=active]:z-10', 'data-[state=active]:after:absolute data-[state=active]:after:-bottom-9 data-[state=active]:after:left-0 data-[state=active]:after:right-0', 'data-[state=active]:after:h-2 data-[state=active]:after:bg-foreground-neutral-base'),
+                                children: code
+                            }, code))
+                    }),
+                    copyButton && /*#__PURE__*/ _jsx(CodeCopyButton, {
+                        content: activeCode,
+                        onCopy: onCopy,
+                        className: "shrink-0"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "w-full px-4 pb-4 pt-8",
+                children: Object.entries(codes).map(([code, rawCode])=>/*#__PURE__*/ _jsx(Tabs.Content, {
+                        value: code,
+                        className: "w-full",
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: cn('flex min-h-0 min-w-0 w-full shrink-0 rounded-8 border border-border-contrast-bottom bg-background-neutral-base dark:bg-background-contrast-subtle font-code', '[&_pre]:py-12 [&_pre]:font-code', '[&_pre]:m-0 [&_pre]:px-0 [&_pre]:bg-transparent', '[&_code]:w-full [&_code]:overflow-x-auto [&_code]:bg-transparent [&_code]:font-code [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base', lineNumbers && '[&_code]:grid [&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none', '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:min-h-[1.25rem]'),
+                            children: /*#__PURE__*/ _jsx(CodeContent, {
+                                code: rawCode,
+                                highlightedCode: highlightedCodes[code],
+                                isLoading: isLoading,
+                                syntaxHighlighting: syntaxHighlighting,
+                                lineNumbers: lineNumbers
+                            })
+                        })
+                    }, code))
+            })
+        ]
+    });
+}
+export function CodeTabs({ codes, lang = 'bash', themes = {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark'
+}, className, defaultValue, value: controlledValue, onValueChange: controlledOnValueChange, copyButton = true, onCopy, syntaxHighlighting = false, lineNumbers = false, ...props }) {
+    const firstKey = useMemo(()=>Object.keys(codes)[0] ?? '', [
+        codes
+    ]);
+    const [value, onValueChange] = useControllableState({
+        defaultProp: defaultValue ?? firstKey,
+        prop: controlledValue,
+        onChange: controlledOnValueChange
+    });
+    return /*#__PURE__*/ _jsx(Tabs.Root, {
+        className: cn('w-full overflow-hidden rounded-12 bg-background-components-pressed dark:bg-background-contrast-base shadow-button-neutral', className),
+        value: value,
+        onValueChange: onValueChange,
+        ...props,
+        children: /*#__PURE__*/ _jsx(CodeTabsContent, {
+            codes: codes,
+            lang: lang,
+            themes: themes,
+            copyButton: copyButton,
+            onCopy: onCopy,
+            syntaxHighlighting: syntaxHighlighting,
+            lineNumbers: lineNumbers,
+            activeValue: value ?? firstKey
+        })
+    });
+}
+
+//# sourceMappingURL=code-tabs.js.map

package/dist/components/code-block/code-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block/code-tabs.tsx"],"sourcesContent":["import * as Tabs from '@radix-ui/react-tabs';\nimport {useControllableState} from '@radix-ui/react-use-controllable-state';\nimport {CodeContent} from 'components/code-block/code-content';\nimport {CodeCopyButton} from 'components/code-block/code-copy-button';\nimport {useResolvedTheme} from 'hooks/useResolvedTheme';\nimport {useShikiHighlightMultiple} from 'hooks/useShikiHighlight';\nimport {useShikiStyleInjection} from 'hooks/useShikiStyleInjection';\nimport type {ComponentProps} from 'react';\nimport {useMemo} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type CodeTabsProps = Omit<ComponentProps<typeof Tabs.Root>, 'children'> & {\n  codes: Record<string, string>;\n  lang?: string;\n  themes?: {\n    light: string;\n    dark: string;\n  };\n  copyButton?: boolean;\n  onCopy?: (content: string) => void;\n  syntaxHighlighting?: boolean;\n  lineNumbers?: boolean;\n};\n\nfunction CodeTabsContent({\n  codes,\n  lang = 'bash',\n  themes = {\n    light: 'vitesse-light',\n    dark: 'vitesse-dark',\n  },\n  copyButton = true,\n  onCopy,\n  syntaxHighlighting = false,\n  lineNumbers = false,\n  activeValue,\n}: {\n  codes: Record<string, string>;\n  lang?: string;\n  themes?: {light: string; dark: string};\n  copyButton?: boolean;\n  onCopy?: (content: string) => void;\n  syntaxHighlighting?: boolean;\n  lineNumbers?: boolean;\n  activeValue: string;\n}) {\n  const resolvedTheme = useResolvedTheme();\n  const codesKeys = useMemo(() => Object.keys(codes), [codes]);\n\n  useShikiStyleInjection(syntaxHighlighting);\n\n  const {highlightedCodes, isLoading} = useShikiHighlightMultiple({\n    codes,\n    lang,\n    themes,\n    resolvedTheme,\n    syntaxHighlighting,\n  });\n\n  const activeCode = codes[activeValue] ?? '';\n\n  return (\n    <>\n      <Tabs.List\n        className={cn(\n          'relative flex w-full flex-row items-center justify-between gap-12 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden bg-background-components-pressed dark:bg-background-contrast-base px-16 py-8',\n          'border-b border-border-contrast-bottom',\n          'after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px',\n          'after:bg-border-neutral-base',\n          'dark:after:bg-border-contrast-top',\n          'after:shadow-separator-inset',\n        )}\n      >\n        <div className=\"flex flex-row gap-12\">\n          {codesKeys.map((code) => (\n            <Tabs.Trigger\n              key={code}\n              value={code}\n              className={cn(\n                'relative px-8 py-4 text-xs leading-20 font-medium text-foreground-neutral-muted transition-colors',\n                'data-[state=active]:text-foreground-neutral-base',\n                'hover:text-foreground-neutral-base',\n                'data-[state=active]:z-10',\n                'data-[state=active]:after:absolute data-[state=active]:after:-bottom-9 data-[state=active]:after:left-0 data-[state=active]:after:right-0',\n                'data-[state=active]:after:h-2 data-[state=active]:after:bg-foreground-neutral-base',\n              )}\n            >\n              {code}\n            </Tabs.Trigger>\n          ))}\n        </div>\n\n        {copyButton && <CodeCopyButton content={activeCode} onCopy={onCopy} className=\"shrink-0\" />}\n      </Tabs.List>\n      <div className=\"w-full px-4 pb-4 pt-8\">\n        {Object.entries(codes).map(([code, rawCode]) => (\n          <Tabs.Content key={code} value={code} className=\"w-full\">\n            <div\n              className={cn(\n                'flex min-h-0 min-w-0 w-full shrink-0 rounded-8 border border-border-contrast-bottom bg-background-neutral-base dark:bg-background-contrast-subtle font-code',\n                '[&_pre]:py-12 [&_pre]:font-code',\n                '[&_pre]:m-0 [&_pre]:px-0 [&_pre]:bg-transparent',\n                '[&_code]:w-full [&_code]:overflow-x-auto [&_code]:bg-transparent [&_code]:font-code [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base',\n                lineNumbers &&\n                  '[&_code]:grid [&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',\n                '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:min-h-[1.25rem]',\n              )}\n            >\n              <CodeContent\n                code={rawCode}\n                highlightedCode={highlightedCodes[code]}\n                isLoading={isLoading}\n                syntaxHighlighting={syntaxHighlighting}\n                lineNumbers={lineNumbers}\n              />\n            </div>\n          </Tabs.Content>\n        ))}\n      </div>\n    </>\n  );\n}\n\nexport function CodeTabs({\n  codes,\n  lang = 'bash',\n  themes = {\n    light: 'vitesse-light',\n    dark: 'vitesse-dark',\n  },\n  className,\n  defaultValue,\n  value: controlledValue,\n  onValueChange: controlledOnValueChange,\n  copyButton = true,\n  onCopy,\n  syntaxHighlighting = false,\n  lineNumbers = false,\n  ...props\n}: CodeTabsProps) {\n  const firstKey = useMemo(() => Object.keys(codes)[0] ?? '', [codes]);\n  const [value, onValueChange] = useControllableState({\n    defaultProp: defaultValue ?? firstKey,\n    prop: controlledValue,\n    onChange: controlledOnValueChange,\n  });\n\n  return (\n    <Tabs.Root\n      className={cn(\n        'w-full overflow-hidden rounded-12 bg-background-components-pressed dark:bg-background-contrast-base shadow-button-neutral',\n        className,\n      )}\n      value={value}\n      onValueChange={onValueChange}\n      {...props}\n    >\n      <CodeTabsContent\n        codes={codes}\n        lang={lang}\n        themes={themes}\n        copyButton={copyButton}\n        onCopy={onCopy}\n        syntaxHighlighting={syntaxHighlighting}\n        lineNumbers={lineNumbers}\n        activeValue={value ?? firstKey}\n      />\n    </Tabs.Root>\n  );\n}\n"],"names":["Tabs","useControllableState","CodeContent","CodeCopyButton","useResolvedTheme","useShikiHighlightMultiple","useShikiStyleInjection","useMemo","cn","CodeTabsContent","codes","lang","themes","light","dark","copyButton","onCopy","syntaxHighlighting","lineNumbers","activeValue","resolvedTheme","codesKeys","Object","keys","highlightedCodes","isLoading","activeCode","List","className","div","map","code","Trigger","value","content","entries","rawCode","Content","highlightedCode","CodeTabs","defaultValue","controlledValue","onValueChange","controlledOnValueChange","props","firstKey","defaultProp","prop","onChange","Root"],"mappings":";AAAA,YAAYA,UAAU,uBAAuB;AAC7C,SAAQC,oBAAoB,QAAO,yCAAyC;AAC5E,SAAQC,WAAW,QAAO,qCAAqC;AAC/D,SAAQC,cAAc,QAAO,yCAAyC;AACtE,SAAQC,gBAAgB,QAAO,yBAAyB;AACxD,SAAQC,yBAAyB,QAAO,0BAA0B;AAClE,SAAQC,sBAAsB,QAAO,+BAA+B;AAEpE,SAAQC,OAAO,QAAO,QAAQ;AAC9B,SAAQC,EAAE,QAAO,WAAW;AAe5B,SAASC,gBAAgB,EACvBC,KAAK,EACLC,OAAO,MAAM,EACbC,SAAS;IACPC,OAAO;IACPC,MAAM;AACR,CAAC,EACDC,aAAa,IAAI,EACjBC,MAAM,EACNC,qBAAqB,KAAK,EAC1BC,cAAc,KAAK,EACnBC,WAAW,EAUZ;IACC,MAAMC,gBAAgBhB;IACtB,MAAMiB,YAAYd,QAAQ,IAAMe,OAAOC,IAAI,CAACb,QAAQ;QAACA;KAAM;IAE3DJ,uBAAuBW;IAEvB,MAAM,EAACO,gBAAgB,EAAEC,SAAS,EAAC,GAAGpB,0BAA0B;QAC9DK;QACAC;QACAC;QACAQ;QACAH;IACF;IAEA,MAAMS,aAAahB,KAAK,CAACS,YAAY,IAAI;IAEzC,qBACE;;0BACE,MAACnB,KAAK2B,IAAI;gBACRC,WAAWpB,GACT,uNACA,0CACA,uEACA,gCACA,qCACA;;kCAGF,KAACqB;wBAAID,WAAU;kCACZP,UAAUS,GAAG,CAAC,CAACC,qBACd,KAAC/B,KAAKgC,OAAO;gCAEXC,OAAOF;gCACPH,WAAWpB,GACT,qGACA,oDACA,sCACA,4BACA,6IACA;0CAGDuB;+BAXIA;;oBAgBVhB,4BAAc,KAACZ;wBAAe+B,SAASR;wBAAYV,QAAQA;wBAAQY,WAAU;;;;0BAEhF,KAACC;gBAAID,WAAU;0BACZN,OAAOa,OAAO,CAACzB,OAAOoB,GAAG,CAAC,CAAC,CAACC,MAAMK,QAAQ,iBACzC,KAACpC,KAAKqC,OAAO;wBAAYJ,OAAOF;wBAAMH,WAAU;kCAC9C,cAAA,KAACC;4BACCD,WAAWpB,GACT,+JACA,mCACA,mDACA,kKACAU,eACE,8YACF;sCAGF,cAAA,KAAChB;gCACC6B,MAAMK;gCACNE,iBAAiBd,gBAAgB,CAACO,KAAK;gCACvCN,WAAWA;gCACXR,oBAAoBA;gCACpBC,aAAaA;;;uBAjBAa;;;;AAyB7B;AAEA,OAAO,SAASQ,SAAS,EACvB7B,KAAK,EACLC,OAAO,MAAM,EACbC,SAAS;IACPC,OAAO;IACPC,MAAM;AACR,CAAC,EACDc,SAAS,EACTY,YAAY,EACZP,OAAOQ,eAAe,EACtBC,eAAeC,uBAAuB,EACtC5B,aAAa,IAAI,EACjBC,MAAM,EACNC,qBAAqB,KAAK,EAC1BC,cAAc,KAAK,EACnB,GAAG0B,OACW;IACd,MAAMC,WAAWtC,QAAQ,IAAMe,OAAOC,IAAI,CAACb,MAAM,CAAC,EAAE,IAAI,IAAI;QAACA;KAAM;IACnE,MAAM,CAACuB,OAAOS,cAAc,GAAGzC,qBAAqB;QAClD6C,aAAaN,gBAAgBK;QAC7BE,MAAMN;QACNO,UAAUL;IACZ;IAEA,qBACE,KAAC3C,KAAKiD,IAAI;QACRrB,WAAWpB,GACT,6HACAoB;QAEFK,OAAOA;QACPS,eAAeA;QACd,GAAGE,KAAK;kBAET,cAAA,KAACnC;YACCC,OAAOA;YACPC,MAAMA;YACNC,QAAQA;YACRG,YAAYA;YACZC,QAAQA;YACRC,oBAAoBA;YACpBC,aAAaA;YACbC,aAAac,SAASY;;;AAI9B"}