@rlx-ui/mcp 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data/registry.json +7 -3
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/dist/data/registry.json
CHANGED
|
@@ -1309,13 +1309,17 @@
|
|
|
1309
1309
|
"packageName": "@rlx-components/code-tabs",
|
|
1310
1310
|
"slug": "code-tabs",
|
|
1311
1311
|
"category": "component",
|
|
1312
|
-
"sourceCode": "\"use client\";\n\nimport {
|
|
1312
|
+
"sourceCode": "\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\nimport { ShikiCodeBlock } from \"@rlx-components/shiki-code-block\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@rlx-widgets/tabs\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { getThemeBackgroundHex } from \"./utils\";\nimport { CodeTabsProps } from \"./types\";\n\nexport const CodeTabs = ({\n tabs,\n theme = \"ayu-dark\",\n startAdornment,\n}: CodeTabsProps) => {\n const [backgroundColor, setBackgroundColor] = useState<string | undefined>(\n undefined\n );\n const [value, setValue] = useState<string>(tabs[0]?.id ?? \"\");\n\n const handleValueChange = useCallback((newValue: string) => {\n setValue(newValue);\n }, []);\n\n useEffect(() => {\n void getThemeBackgroundHex(theme)\n .then((bgHex) => {\n if (bgHex) {\n setBackgroundColor(bgHex);\n }\n })\n .catch(() => {\n // Silently handle errors - fallback to default bg-muted/30\n });\n }, [theme]);\n\n if (!tabs.length || !value) {\n return null;\n }\n\n return (\n <div className=\"relative w-full\">\n <Tabs\n value={value}\n onValueChange={handleValueChange}\n className=\"w-full gap-0\"\n >\n <div\n className={cn(\n \"border-b pb-0 rounded-lg rounded-b-none\",\n backgroundColor ? \"\" : \"bg-muted/30\"\n )}\n style={backgroundColor ? { backgroundColor } : undefined}\n >\n <TabsList className=\"bg-transparent h-auto p-0\">\n {startAdornment}\n {tabs.map((tab) => (\n <TabsTrigger\n key={tab.id}\n value={tab.id}\n className=\"px-4 py-2.5 border-b-0\"\n >\n {tab.label}\n </TabsTrigger>\n ))}\n </TabsList>\n </div>\n\n <div className=\"p-0\">\n {tabs.map((tab) => (\n <TabsContent key={tab.id} value={tab.id}>\n <ShikiCodeBlock\n code={tab.code}\n lang={tab.lang}\n className={cn(\n \"h-fit rounded-lg rounded-t-none border-0\",\n tab.codeBlockClassName\n )}\n />\n </TabsContent>\n ))}\n </div>\n </Tabs>\n </div>\n );\n};\n",
|
|
1313
1313
|
"demos": [
|
|
1314
1314
|
{
|
|
1315
1315
|
"name": "default",
|
|
1316
1316
|
"code": "\"use client\";\n\nimport { CodeTabs } from \"@rlx-components/code-tabs\";\nimport { TerminalIcon } from \"lucide-react\";\n\nexport const Preview = () => {\n return (\n <div className=\"w-full\">\n <CodeTabs\n tabs={[\n {\n id: \"pnpm\",\n label: \"pnpm\",\n code: \"pnpm add @rlx-components/code-tabs\",\n lang: \"bash\",\n },\n {\n id: \"npm\",\n label: \"npm\",\n code: \"npm install @rlx-components/code-tabs\",\n lang: \"bash\",\n },\n {\n id: \"yarn\",\n label: \"yarn\",\n code: \"yarn add @rlx-components/code-tabs\",\n lang: \"bash\",\n },\n ]}\n startAdornment={\n <div className=\"px-4\">\n <TerminalIcon className=\"w-4 h-4\" />\n </div>\n }\n />\n </div>\n );\n};\n"
|
|
1317
1317
|
}
|
|
1318
|
-
]
|
|
1318
|
+
],
|
|
1319
|
+
"sourceFiles": {
|
|
1320
|
+
"types/CodeTabsProps.t.ts": "import { BundledLanguage } from \"shiki/bundle/web\";\nimport { BundledTheme } from \"shiki\";\nimport { ReactNode } from \"react\";\n\nexport type CodeTabsProps = {\n tabs: Array<{\n id: string;\n label: ReactNode;\n code: string;\n lang: BundledLanguage;\n codeBlockClassName?: string;\n }>;\n theme?: BundledTheme;\n startAdornment?: ReactNode;\n};\n",
|
|
1321
|
+
"utils/getShikiBgHex.ts": "import { BundledTheme, getSingletonHighlighter } from \"shiki\";\n\nexport const getThemeBackgroundHex = async (themeName: BundledTheme) => {\n const highlighter = await getSingletonHighlighter({\n themes: [themeName],\n });\n\n const theme = highlighter.getTheme(themeName);\n\n return theme.colors?.[\"editor.background\"] || null;\n};\n"
|
|
1322
|
+
}
|
|
1319
1323
|
},
|
|
1320
1324
|
{
|
|
1321
1325
|
"name": "Inline Code",
|
|
@@ -1500,5 +1504,5 @@
|
|
|
1500
1504
|
"sourceCode": "export const isValidDate = (date: Date) => {\n return !Number.isNaN(date.getTime());\n};\n\nexport default isValidDate;\n"
|
|
1501
1505
|
}
|
|
1502
1506
|
],
|
|
1503
|
-
"extractedAt": "2025-11-
|
|
1507
|
+
"extractedAt": "2025-11-30T18:40:33.347Z"
|
|
1504
1508
|
}
|
package/dist/package.json
CHANGED