@rlx-ui/mcp 0.0.7 → 0.0.9
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 +19 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/dist/data/registry.json
CHANGED
|
@@ -1303,6 +1303,24 @@
|
|
|
1303
1303
|
"types/TabType.t.ts": "import { TabTypeEnum } from \"../enums\";\n\nexport type TabType = `${TabTypeEnum}`;\n"
|
|
1304
1304
|
}
|
|
1305
1305
|
},
|
|
1306
|
+
{
|
|
1307
|
+
"name": "Code Tabs",
|
|
1308
|
+
"exportName": "CodeTabs",
|
|
1309
|
+
"packageName": "@rlx-components/code-tabs",
|
|
1310
|
+
"slug": "code-tabs",
|
|
1311
|
+
"category": "component",
|
|
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
|
+
"demos": [
|
|
1314
|
+
{
|
|
1315
|
+
"name": "default",
|
|
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
|
+
}
|
|
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
|
+
}
|
|
1323
|
+
},
|
|
1306
1324
|
{
|
|
1307
1325
|
"name": "Inline Code",
|
|
1308
1326
|
"exportName": "InlineCode",
|
|
@@ -1486,5 +1504,5 @@
|
|
|
1486
1504
|
"sourceCode": "export const isValidDate = (date: Date) => {\n return !Number.isNaN(date.getTime());\n};\n\nexport default isValidDate;\n"
|
|
1487
1505
|
}
|
|
1488
1506
|
],
|
|
1489
|
-
"extractedAt": "2025-11-
|
|
1507
|
+
"extractedAt": "2025-11-30T18:40:33.347Z"
|
|
1490
1508
|
}
|
package/dist/package.json
CHANGED