@rlx-ui/mcp 0.0.15 → 0.0.16
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 +22 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/dist/data/registry.json
CHANGED
|
@@ -1396,6 +1396,27 @@
|
|
|
1396
1396
|
"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"
|
|
1397
1397
|
}
|
|
1398
1398
|
},
|
|
1399
|
+
{
|
|
1400
|
+
"name": "Collapsible Panel",
|
|
1401
|
+
"exportName": "CollapsiblePanel",
|
|
1402
|
+
"packageName": "@rlx-components/collapsible-panel",
|
|
1403
|
+
"version": "0.0.1",
|
|
1404
|
+
"slug": "collapsible-panel",
|
|
1405
|
+
"category": "component",
|
|
1406
|
+
"sourceCode": "\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { CollapsiblePanelContext, useCollapsiblePanel } from \"./contexts\";\nimport type {\n CollapsiblePanelProps,\n CollapsiblePanelHeaderProps,\n CollapsiblePanelContentProps,\n} from \"./types\";\n\nexport const CollapsiblePanel = ({\n isExpanded,\n onToggle,\n children,\n className,\n ...props\n}: CollapsiblePanelProps) => {\n return (\n <CollapsiblePanelContext.Provider value={{ isExpanded, onToggle }}>\n <div\n className={cn(\"border rounded-lg shadow-sm bg-background\", className)}\n data-slot=\"collapsible-panel\"\n {...props}\n >\n {children}\n </div>\n </CollapsiblePanelContext.Provider>\n );\n};\n\nexport const CollapsiblePanelHeader = ({\n children,\n className,\n ...props\n}: CollapsiblePanelHeaderProps) => {\n const { isExpanded, onToggle } = useCollapsiblePanel();\n\n return (\n <button\n onClick={onToggle}\n className={cn(\n \"w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors rounded-t-lg cursor-pointer\",\n className\n )}\n aria-expanded={isExpanded}\n data-slot=\"collapsible-panel-header\"\n aria-controls=\"collapsible-panel-content\"\n type=\"button\"\n {...props}\n >\n {children}\n <ChevronDown\n className={cn(\n \"size-4 text-muted-foreground transition-transform duration-200\",\n !isExpanded && \"-rotate-90\"\n )}\n />\n </button>\n );\n};\n\nexport const CollapsiblePanelContent = ({\n children,\n className,\n ...props\n}: CollapsiblePanelContentProps) => {\n const { isExpanded } = useCollapsiblePanel();\n\n return (\n <div\n id=\"collapsible-panel-content\"\n data-slot=\"collapsible-panel-content\"\n className={cn(\n \"overflow-hidden transition-all duration-300 ease-in-out\",\n isExpanded ? \"max-h-[1000px] opacity-100\" : \"max-h-0 opacity-0\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n};\n",
|
|
1407
|
+
"demos": [
|
|
1408
|
+
{
|
|
1409
|
+
"name": "default",
|
|
1410
|
+
"code": "\"use client\";\n\nimport {\n CollapsiblePanel,\n CollapsiblePanelHeader,\n CollapsiblePanelContent,\n} from \"@rlx-components/collapsible-panel\";\nimport { useState } from \"react\";\n\nexport const Preview = () => {\n const [isExpanded1, setIsExpanded1] = useState(true);\n const [isExpanded2, setIsExpanded2] = useState(false);\n const [isExpanded3, setIsExpanded3] = useState(false);\n\n return (\n <div className=\"w-full max-w-2xl space-y-4\">\n <CollapsiblePanel\n isExpanded={isExpanded1}\n onToggle={() => setIsExpanded1(!isExpanded1)}\n >\n <CollapsiblePanelHeader>\n <span className=\"font-semibold\">Expanded by default</span>\n </CollapsiblePanelHeader>\n <CollapsiblePanelContent>\n <div className=\"p-4\">\n <p className=\"text-sm text-muted-foreground\">\n This panel starts expanded. Click the header to collapse it.\n </p>\n </div>\n </CollapsiblePanelContent>\n </CollapsiblePanel>\n\n <CollapsiblePanel\n isExpanded={isExpanded2}\n onToggle={() => setIsExpanded2(!isExpanded2)}\n >\n <CollapsiblePanelHeader>\n <span className=\"font-semibold\">Collapsed by default</span>\n </CollapsiblePanelHeader>\n <CollapsiblePanelContent>\n <div className=\"p-4\">\n <p className=\"text-sm text-muted-foreground\">\n This panel starts collapsed. Click the header to expand it and see\n this content.\n </p>\n </div>\n </CollapsiblePanelContent>\n </CollapsiblePanel>\n\n <CollapsiblePanel\n isExpanded={isExpanded3}\n onToggle={() => setIsExpanded3(!isExpanded3)}\n >\n <CollapsiblePanelHeader>\n <span className=\"font-semibold\">Panel with more content</span>\n </CollapsiblePanelHeader>\n <CollapsiblePanelContent>\n <div className=\"p-4 space-y-2\">\n <p className=\"text-sm text-muted-foreground\">\n This panel contains more content to demonstrate the smooth\n animation.\n </p>\n <ul className=\"list-disc list-inside text-sm text-muted-foreground space-y-1\">\n <li>Item one</li>\n <li>Item two</li>\n <li>Item three</li>\n </ul>\n </div>\n </CollapsiblePanelContent>\n </CollapsiblePanel>\n </div>\n );\n};\n\n"
|
|
1411
|
+
}
|
|
1412
|
+
],
|
|
1413
|
+
"sourceFiles": {
|
|
1414
|
+
"contexts/CollapsiblePanelContext.tsx": "\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\ntype CollapsiblePanelContextValue = {\n isExpanded: boolean;\n onToggle: () => void;\n};\n\nconst CollapsiblePanelContext =\n createContext<CollapsiblePanelContextValue | null>(null);\n\nexport const useCollapsiblePanel = () => {\n const context = useContext(CollapsiblePanelContext);\n if (!context) {\n throw new Error(\n \"CollapsiblePanel components must be used within CollapsiblePanel\"\n );\n }\n return context;\n};\n\nexport { CollapsiblePanelContext };\n",
|
|
1415
|
+
"types/CollapsiblePanelContentProps.t.ts": "import { ComponentProps, ReactNode } from \"react\";\n\nexport type CollapsiblePanelContentProps = ComponentProps<\"div\"> & {\n children: ReactNode;\n};\n",
|
|
1416
|
+
"types/CollapsiblePanelHeaderProps.t.ts": "import { ComponentProps, ReactNode } from \"react\";\n\nexport type CollapsiblePanelHeaderProps = ComponentProps<\"button\"> & {\n children: ReactNode;\n};\n\n",
|
|
1417
|
+
"types/CollapsiblePanelProps.t.ts": "import { ComponentProps, ReactNode } from \"react\";\n\nexport type CollapsiblePanelProps = ComponentProps<\"div\"> & {\n isExpanded: boolean;\n onToggle: () => void;\n children: ReactNode;\n};\n\n"
|
|
1418
|
+
}
|
|
1419
|
+
},
|
|
1399
1420
|
{
|
|
1400
1421
|
"name": "Inline Code",
|
|
1401
1422
|
"exportName": "InlineCode",
|
|
@@ -1627,5 +1648,5 @@
|
|
|
1627
1648
|
"sourceCode": "export const isValidDate = (date: Date) => {\n return !Number.isNaN(date.getTime());\n};\n\nexport default isValidDate;\n"
|
|
1628
1649
|
}
|
|
1629
1650
|
],
|
|
1630
|
-
"extractedAt": "2025-12-
|
|
1651
|
+
"extractedAt": "2025-12-08T03:17:41.438Z"
|
|
1631
1652
|
}
|
package/dist/package.json
CHANGED