@rlx-ui/mcp 0.0.14 → 0.0.16

package/dist/data/registry.json

@@ -1396,6 +1396,27 @@
         "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"
       }
     },
+    {
+      "name": "Collapsible Panel",
+      "exportName": "CollapsiblePanel",
+      "packageName": "@rlx-components/collapsible-panel",
+      "version": "0.0.1",
+      "slug": "collapsible-panel",
+      "category": "component",
+      "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",
+      "demos": [
+        {
+          "name": "default",
+          "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"
+        }
+      ],
+      "sourceFiles": {
+        "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",
+        "types/CollapsiblePanelContentProps.t.ts": "import { ComponentProps, ReactNode } from \"react\";\n\nexport type CollapsiblePanelContentProps = ComponentProps<\"div\"> & {\n  children: ReactNode;\n};\n",
+        "types/CollapsiblePanelHeaderProps.t.ts": "import { ComponentProps, ReactNode } from \"react\";\n\nexport type CollapsiblePanelHeaderProps = ComponentProps<\"button\"> & {\n  children: ReactNode;\n};\n\n",
+        "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"
+      }
+    },
     {
       "name": "Inline Code",
       "exportName": "InlineCode",
@@ -1415,7 +1436,7 @@
       "name": "Selectable Button",
       "exportName": "SelectableButton",
       "packageName": "@rlx-components/selectable-button",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "slug": "selectable-button",
       "category": "component",
       "sourceCode": "\"use client\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { useMemo } from \"react\";\nimport type { SelectableButtonProps } from \"./types\";\n\nexport const SelectableButton = ({\n  selected,\n  children,\n  icon,\n  className,\n  size = \"sm\",\n  ...props\n}: SelectableButtonProps) => {\n  const buttonClassName = useMemo(\n    () =>\n      cn(\n        \"rounded-lg border transition-all duration-200\",\n        !selected &&\n          \"bg-card text-foreground border-border hover:border-primary/50! hover:bg-muted/50 hover:text-foreground dark:hover:border-primary/50!\",\n        selected &&\n          \"bg-primary text-primary-foreground border-primary hover:bg-primary hover:text-primary-foreground shadow-sm\",\n        className\n      ),\n    [selected, className]\n  );\n\n  return (\n    <Button\n      variant={selected ? \"default\" : \"outline\"}\n      size={size}\n      className={buttonClassName}\n      {...props}\n    >\n      {icon}\n      {children}\n    </Button>\n  );\n};\n",
@@ -1429,6 +1450,24 @@
         "types/SelectableButtonProps.t.ts": "import { ComponentProps, ReactNode } from \"react\";\nimport { VariantProps } from \"class-variance-authority\";\nimport { buttonVariants } from \"@rlx-widgets/button\";\n\nexport type SelectableButtonProps = ComponentProps<\"button\"> & {\n  selected: boolean;\n  icon?: ReactNode;\n  size?: VariantProps<typeof buttonVariants>[\"size\"];\n};\n\n"
       }
     },
+    {
+      "name": "Selectable Pill",
+      "exportName": "SelectablePill",
+      "packageName": "@rlx-components/selectable-pill",
+      "version": "0.0.1",
+      "slug": "selectable-pill",
+      "category": "component",
+      "sourceCode": "import { cn } from \"@rlx-widgets/base\";\nimport { cva } from \"class-variance-authority\";\nimport type { SelectablePillProps } from \"./types\";\n\nconst selectablePillVariants = cva(\n  \"rounded-full font-medium transition-all duration-200 cursor-pointer disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      selected: {\n        true: \"bg-primary text-primary-foreground shadow-sm disabled:shadow-none\",\n        false: \"bg-muted text-muted-foreground hover:bg-muted/80\",\n      },\n      size: {\n        sm: \"px-2.5 py-1 text-xs\",\n        default: \"px-3 py-1.5 text-xs\",\n        lg: \"px-4 py-2 text-sm\",\n      },\n    },\n    defaultVariants: {\n      selected: false,\n      size: \"default\",\n    },\n  }\n);\n\nconst SelectablePill = ({\n  selected = false,\n  children,\n  size = \"default\",\n  className,\n  ...props\n}: SelectablePillProps) => {\n  return (\n    <button\n      className={cn(selectablePillVariants({ selected, size }), className)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport { SelectablePill, selectablePillVariants };\n",
+      "demos": [
+        {
+          "name": "default",
+          "code": "\"use client\";\n\nimport { SelectablePill } from \"@rlx-components/selectable-pill\";\nimport { useState } from \"react\";\n\nexport const Preview = () => {\n  const [selected1, setSelected1] = useState(false);\n  const [selected2, setSelected2] = useState(true);\n  const [selected3, setSelected3] = useState(false);\n  const [selected4, setSelected4] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-6\">\n      <div className=\"space-y-2\">\n        <h3 className=\"text-sm font-medium\">Basic usage</h3>\n        <div className=\"flex flex-wrap gap-2\">\n          <SelectablePill\n            selected={selected1}\n            onClick={() => setSelected1(!selected1)}\n          >\n            React\n          </SelectablePill>\n          <SelectablePill\n            selected={selected2}\n            onClick={() => setSelected2(!selected2)}\n          >\n            TypeScript\n          </SelectablePill>\n          <SelectablePill\n            selected={selected3}\n            onClick={() => setSelected3(!selected3)}\n          >\n            Next.js\n          </SelectablePill>\n        </div>\n      </div>\n      <div className=\"space-y-2\">\n        <h3 className=\"text-sm font-medium\">Different sizes</h3>\n        <div className=\"flex items-center gap-2\">\n          <SelectablePill selected={false} size=\"sm\">\n            Small\n          </SelectablePill>\n          <SelectablePill selected={true} size=\"default\">\n            Default\n          </SelectablePill>\n          <SelectablePill selected={false} size=\"lg\">\n            Large\n          </SelectablePill>\n        </div>\n      </div>\n      <div className=\"space-y-2\">\n        <h3 className=\"text-sm font-medium\">Disabled state</h3>\n        <div className=\"flex gap-2\">\n          <SelectablePill selected={false} disabled>\n            Disabled\n          </SelectablePill>\n          <SelectablePill selected={true} disabled>\n            Selected Disabled\n          </SelectablePill>\n        </div>\n      </div>\n      <div className=\"space-y-2\">\n        <h3 className=\"text-sm font-medium\">Filter/tag example</h3>\n        <div className=\"flex flex-wrap gap-2\">\n          {[\"All\", \"Active\", \"Completed\", \"Archived\"].map((filter) => (\n            <SelectablePill\n              key={filter}\n              selected={selected4 && filter === \"Active\"}\n              onClick={() => setSelected4(filter === \"Active\")}\n            >\n              {filter}\n            </SelectablePill>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\n"
+        }
+      ],
+      "sourceFiles": {
+        "types/SelectablePillProps.t.ts": "import { ComponentProps, ReactNode } from \"react\";\nimport { selectablePillVariants } from \"../SelectablePill\";\nimport { VariantProps } from \"class-variance-authority\";\n\nexport type SelectablePillProps = ComponentProps<\"button\"> & {\n  children: ReactNode;\n} & VariantProps<typeof selectablePillVariants>;\n"
+      }
+    },
     {
       "name": "Shiki Code Block",
       "exportName": "ShikiCodeBlock",
@@ -1609,5 +1648,5 @@
       "sourceCode": "export const isValidDate = (date: Date) => {\n  return !Number.isNaN(date.getTime());\n};\n\nexport default isValidDate;\n"
     }
   ],
-  "extractedAt": "2025-12-08T00:08:04.743Z"
+  "extractedAt": "2025-12-08T03:17:41.438Z"
 }

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rlx-ui/mcp",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "MCP (Model Context Protocol) Server for RLX UI components",
   "publishConfig": {
     "access": "public"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rlx-ui/mcp",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "MCP (Model Context Protocol) Server for RLX UI components",
   "publishConfig": {
     "access": "public"