@rlx-ui/mcp 0.0.13 → 0.0.15
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 +37 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/dist/data/registry.json
CHANGED
|
@@ -1411,6 +1411,42 @@
|
|
|
1411
1411
|
}
|
|
1412
1412
|
]
|
|
1413
1413
|
},
|
|
1414
|
+
{
|
|
1415
|
+
"name": "Selectable Button",
|
|
1416
|
+
"exportName": "SelectableButton",
|
|
1417
|
+
"packageName": "@rlx-components/selectable-button",
|
|
1418
|
+
"version": "0.0.1",
|
|
1419
|
+
"slug": "selectable-button",
|
|
1420
|
+
"category": "component",
|
|
1421
|
+
"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",
|
|
1422
|
+
"demos": [
|
|
1423
|
+
{
|
|
1424
|
+
"name": "default",
|
|
1425
|
+
"code": "\"use client\";\n\nimport { SelectableButton } from \"@rlx-components/selectable-button\";\nimport { CheckIcon, StarIcon, HeartIcon } from \"lucide-react\";\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\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\">With icon</h3>\n <div className=\"flex gap-2\">\n <SelectableButton\n selected={selected1}\n onClick={() => setSelected1(!selected1)}\n icon={<CheckIcon className=\"size-4\" />}\n >\n Option 1\n </SelectableButton>\n <SelectableButton\n selected={selected2}\n onClick={() => setSelected2(!selected2)}\n icon={<StarIcon className=\"size-4\" />}\n >\n Option 2\n </SelectableButton>\n </div>\n </div>\n <div className=\"space-y-2\">\n <h3 className=\"text-sm font-medium\">Without icon</h3>\n <div className=\"flex gap-2\">\n <SelectableButton\n selected={selected3}\n onClick={() => setSelected3(!selected3)}\n >\n Select me\n </SelectableButton>\n <SelectableButton selected={true} disabled>\n Disabled\n </SelectableButton>\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 <SelectableButton selected={false} size=\"sm\" icon={<HeartIcon className=\"size-3\" />}>\n Small\n </SelectableButton>\n <SelectableButton selected={true} size=\"default\">\n Default\n </SelectableButton>\n <SelectableButton selected={false} size=\"lg\">\n Large\n </SelectableButton>\n </div>\n </div>\n </div>\n );\n};\n\n"
|
|
1426
|
+
}
|
|
1427
|
+
],
|
|
1428
|
+
"sourceFiles": {
|
|
1429
|
+
"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"
|
|
1430
|
+
}
|
|
1431
|
+
},
|
|
1432
|
+
{
|
|
1433
|
+
"name": "Selectable Pill",
|
|
1434
|
+
"exportName": "SelectablePill",
|
|
1435
|
+
"packageName": "@rlx-components/selectable-pill",
|
|
1436
|
+
"version": "0.0.1",
|
|
1437
|
+
"slug": "selectable-pill",
|
|
1438
|
+
"category": "component",
|
|
1439
|
+
"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",
|
|
1440
|
+
"demos": [
|
|
1441
|
+
{
|
|
1442
|
+
"name": "default",
|
|
1443
|
+
"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"
|
|
1444
|
+
}
|
|
1445
|
+
],
|
|
1446
|
+
"sourceFiles": {
|
|
1447
|
+
"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"
|
|
1448
|
+
}
|
|
1449
|
+
},
|
|
1414
1450
|
{
|
|
1415
1451
|
"name": "Shiki Code Block",
|
|
1416
1452
|
"exportName": "ShikiCodeBlock",
|
|
@@ -1591,5 +1627,5 @@
|
|
|
1591
1627
|
"sourceCode": "export const isValidDate = (date: Date) => {\n return !Number.isNaN(date.getTime());\n};\n\nexport default isValidDate;\n"
|
|
1592
1628
|
}
|
|
1593
1629
|
],
|
|
1594
|
-
"extractedAt": "2025-12-
|
|
1630
|
+
"extractedAt": "2025-12-08T00:51:09.685Z"
|
|
1595
1631
|
}
|
package/dist/package.json
CHANGED