From 9e67ba574c363fa14a755bb9f9fae8cc677acdde Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Thu, 21 Aug 2025 03:07:22 +0530 Subject: [PATCH 1/4] added context menu components and documentation --- components/retroui/ContextMenu.tsx | 253 +++++++++++++ components/retroui/index.ts | 1 + config/components.ts | 21 +- config/navigation.ts | 3 +- content/docs/components/context-menu.mdx | 32 ++ package.json | 1 + pnpm-lock.yaml | 331 ++++++++++++++++++ .../components/context-menu-style-default.tsx | 38 ++ 8 files changed, 676 insertions(+), 4 deletions(-) create mode 100644 components/retroui/ContextMenu.tsx create mode 100644 content/docs/components/context-menu.mdx create mode 100644 preview/components/context-menu-style-default.tsx diff --git a/components/retroui/ContextMenu.tsx b/components/retroui/ContextMenu.tsx new file mode 100644 index 0000000..93745f5 --- /dev/null +++ b/components/retroui/ContextMenu.tsx @@ -0,0 +1,253 @@ +"use client"; + +import * as React from "react"; +import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"; +import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +function ContextMenu({ + ...props +}: React.ComponentProps) { + return ; +} + +function ContextMenuTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function ContextMenuGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function ContextMenuPortal({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function ContextMenuSub({ + ...props +}: React.ComponentProps) { + return ; +} + +function ContextMenuRadioGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function ContextMenuSubTrigger({ + className, + inset, + children, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + {children} + + + ); +} + +function ContextMenuSubContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function ContextMenuContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function ContextMenuItem({ + className, + inset, + variant = "default", + ...props +}: React.ComponentProps & { + inset?: boolean; + variant?: "default" | "destructive"; +}) { + return ( + + ); +} + +function ContextMenuCheckboxItem({ + className, + children, + checked, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function ContextMenuRadioItem({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function ContextMenuLabel({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + ); +} + +function ContextMenuSeparator({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function ContextMenuShortcut({ + className, + ...props +}: React.ComponentProps<"span">) { + return ( + + ); +} + +const ContextMenuComponent = Object.assign(ContextMenu, { + Trigger: ContextMenuTrigger, + Content: ContextMenuContent, + Item: ContextMenuItem, + CheckboxItem: ContextMenuCheckboxItem, + RadioItem: ContextMenuRadioItem, + Label: ContextMenuLabel, + Separator: ContextMenuSeparator, + Shortcut: ContextMenuShortcut, + Group: ContextMenuGroup, + Portal: ContextMenuPortal, + Sub: ContextMenuSub, + SubContent: ContextMenuSubContent, + SubTrigger: ContextMenuSubTrigger, + RadioGroup: ContextMenuRadioGroup, +}); + +export { ContextMenuComponent as ContextMenu }; diff --git a/components/retroui/index.ts b/components/retroui/index.ts index 2d6e3e4..1635d9e 100644 --- a/components/retroui/index.ts +++ b/components/retroui/index.ts @@ -24,3 +24,4 @@ export * from "./Sonner"; export * from "./Tooltip"; export * from "./Breadcrumb"; export * from "./CommandDisplay"; +export * from "./ContextMenu"; diff --git a/config/components.ts b/config/components.ts index eb42be7..8d341cf 100644 --- a/config/components.ts +++ b/config/components.ts @@ -132,7 +132,11 @@ export const componentConfig: { breadcrumb: { name: "breadcrumb", filePath: "components/retroui/Breadcrumb.tsx", - } + }, + "context-menu": { + name: "context-menu", + filePath: "components/retroui/ContextMenu.tsx", + }, }, examples: { "accordion-style-default": { @@ -236,7 +240,9 @@ export const componentConfig: { "bar-chart-style-horizontal": { name: "bar-chart-style-horizontal", filePath: "preview/charts/bar-chart-style-horizontal.tsx", - preview: lazy(() => import("@/preview/charts/bar-chart-style-horizontal")), + preview: lazy( + () => import("@/preview/charts/bar-chart-style-horizontal"), + ), }, "button-style-default": { name: "button-style-default", @@ -422,7 +428,9 @@ export const componentConfig: { "table-with-sticky-header": { name: "table-with-sticky-header", filePath: "preview/components/table-with-sticky-header.tsx", - preview: lazy(() => import("@/preview/components/table-with-sticky-header")), + preview: lazy( + () => import("@/preview/components/table-with-sticky-header"), + ), }, "textarea-style-default": { name: "textarea-style-default", @@ -592,5 +600,12 @@ export const componentConfig: { () => import("@/preview/components/breadcrumb-link-component"), ), }, + "context-menu-style-default": { + name: "context-menu-style-default", + filePath: "preview/components/context-menu-style-default.tsx", + preview: lazy( + () => import("@/preview/components/context-menu-style-default"), + ), + }, }, }; diff --git a/config/navigation.ts b/config/navigation.ts index 41b462d..993ec24 100644 --- a/config/navigation.ts +++ b/config/navigation.ts @@ -37,7 +37,7 @@ export const navConfig: INavigationConfig = { title: "Figma Kit", href: "https://pro.retroui.dev/figma", tag: "Pro", - } + }, ], }, { @@ -55,6 +55,7 @@ export const navConfig: INavigationConfig = { { title: "Input", href: `${componentsRoute}/input` }, { title: "Label", href: `${componentsRoute}/label` }, { title: "Menu", href: `${componentsRoute}/menu` }, + { title: "Context Menu", href: `${componentsRoute}/context-menu` }, { title: "Popover", href: `${componentsRoute}/popover`, diff --git a/content/docs/components/context-menu.mdx b/content/docs/components/context-menu.mdx new file mode 100644 index 0000000..7d6d6bd --- /dev/null +++ b/content/docs/components/context-menu.mdx @@ -0,0 +1,32 @@ +--- +title: Context Menu +description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. +lastUpdated: 21 Aug, 2025 +links: + source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/ContextMenu.tsx +--- + + +
+
+ + + + +#### 1. Install dependencies: + +```sh +npm install class-variance-authority +``` + +
+ +#### 2. Copy the code 👇 into your project: + + + + + + +
+
diff --git a/package.json b/package.json index a504dd8..f287408 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@radix-ui/react-accordion": "^1.2.1", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.4", + "@radix-ui/react-context-menu": "^2.2.16", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-label": "^2.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 181b610..4b54499 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@radix-ui/react-checkbox': specifier: ^1.1.4 version: 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-context-menu': + specifier: ^2.2.16 + version: 2.2.16(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) '@radix-ui/react-dialog': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) @@ -896,6 +899,9 @@ packages: '@radix-ui/primitive@1.1.2': resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==} + '@radix-ui/primitive@1.1.3': + resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==} + '@radix-ui/react-accordion@1.2.1': resolution: {integrity: sha512-bg/l7l5QzUjgsh8kjwDFommzAshnUsuVMV5NM56QVCm+7ZckYdd9P/ExR8xG/Oup0OajVxNLaHJ1tb8mXk+nzQ==} peerDependencies: @@ -948,6 +954,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-arrow@1.1.7': + resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-avatar@1.1.1': resolution: {integrity: sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==} peerDependencies: @@ -1039,6 +1058,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-collection@1.1.7': + resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-compose-refs@1.1.0': resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} peerDependencies: @@ -1066,6 +1098,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-context-menu@2.2.16': + resolution: {integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-context@1.1.0': resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==} peerDependencies: @@ -1137,6 +1182,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-dismissable-layer@1.1.11': + resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-dismissable-layer@1.1.5': resolution: {integrity: sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==} peerDependencies: @@ -1194,6 +1252,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-focus-guards@1.1.3': + resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-focus-scope@1.1.0': resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==} peerDependencies: @@ -1233,6 +1300,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-focus-scope@1.1.7': + resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-id@1.1.0': resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} peerDependencies: @@ -1264,6 +1344,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-menu@2.1.16': + resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-menu@2.1.2': resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==} peerDependencies: @@ -1329,6 +1422,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-popper@1.2.8': + resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-portal@1.1.2': resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==} peerDependencies: @@ -1368,6 +1474,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-portal@1.1.9': + resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-presence@1.1.1': resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==} peerDependencies: @@ -1407,6 +1526,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-presence@1.1.5': + resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-primitive@2.0.0': resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} peerDependencies: @@ -1459,6 +1591,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-primitive@2.1.3': + resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-progress@1.1.2': resolution: {integrity: sha512-u1IgJFQ4zNAUTjGdDL5dcl/U8ntOR6jsnhxKb5RKp5Ozwl88xKR9EqRZOe/Mk8tnx0x5tNUe2F+MzsyjqMg0MA==} peerDependencies: @@ -1498,6 +1643,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-roving-focus@1.1.11': + resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-roving-focus@1.1.2': resolution: {integrity: sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==} peerDependencies: @@ -1586,6 +1744,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-slot@1.2.3': + resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-switch@1.1.3': resolution: {integrity: sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==} peerDependencies: @@ -5578,6 +5745,8 @@ snapshots: '@radix-ui/primitive@1.1.2': {} + '@radix-ui/primitive@1.1.3': {} + '@radix-ui/react-accordion@1.2.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -5622,6 +5791,15 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-avatar@1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0) @@ -5714,6 +5892,18 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-collection@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-compose-refs@1.1.0(@types/react@18.0.0)(react@18.0.0)': dependencies: react: 18.0.0 @@ -5732,6 +5922,20 @@ snapshots: optionalDependencies: '@types/react': 18.0.0 + '@radix-ui/react-context-menu@2.2.16(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-context@1.1.0(@types/react@18.0.0)(react@18.0.0)': dependencies: react: 18.0.0 @@ -5797,6 +6001,19 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-dismissable-layer@1.1.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/primitive': 1.1.1 @@ -5850,6 +6067,12 @@ snapshots: optionalDependencies: '@types/react': 18.0.0 + '@radix-ui/react-focus-guards@1.1.3(@types/react@18.0.0)(react@18.0.0)': + dependencies: + react: 18.0.0 + optionalDependencies: + '@types/react': 18.0.0 + '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0) @@ -5883,6 +6106,17 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-id@1.1.0(@types/react@18.0.0)(react@18.0.0)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.0.0)(react@18.0.0) @@ -5906,6 +6140,32 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-menu@2.1.16(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0) + aria-hidden: 1.2.4 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + react-remove-scroll: 2.6.3(@types/react@18.0.0)(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-menu@2.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -6009,6 +6269,24 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-popper@1.2.8(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@floating-ui/react-dom': 2.1.2(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-rect': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-size': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/rect': 1.1.1 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-portal@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) @@ -6039,6 +6317,16 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-portal@1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-presence@1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0) @@ -6069,6 +6357,16 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-presence@1.1.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/react-slot': 1.1.0(@types/react@18.0.0)(react@18.0.0) @@ -6105,6 +6403,15 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-progress@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0) @@ -6150,6 +6457,23 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-roving-focus@1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/primitive': 1.1.1 @@ -6260,6 +6584,13 @@ snapshots: optionalDependencies: '@types/react': 18.0.0 + '@radix-ui/react-slot@1.2.3(@types/react@18.0.0)(react@18.0.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + optionalDependencies: + '@types/react': 18.0.0 + '@radix-ui/react-switch@1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': dependencies: '@radix-ui/primitive': 1.1.1 diff --git a/preview/components/context-menu-style-default.tsx b/preview/components/context-menu-style-default.tsx new file mode 100644 index 0000000..687fa65 --- /dev/null +++ b/preview/components/context-menu-style-default.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { ContextMenu } from "@/components/retroui/ContextMenu"; + +export default function ContextMenuStyleDefault() { + return ( +
+ + + Right click here + + + Copy + Cut + Paste + + Share + + More options + + Archive + Delete + + + + + Show hidden files + + + View mode + List + Grid + + + +
+ ); +} From 273fbce00a9196d6c3dee06b3b46e710c89ba4a9 Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Thu, 21 Aug 2025 03:17:29 +0530 Subject: [PATCH 2/4] format context menu markdown --- preview/components/context-menu-style-default.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/preview/components/context-menu-style-default.tsx b/preview/components/context-menu-style-default.tsx index 687fa65..3f965ec 100644 --- a/preview/components/context-menu-style-default.tsx +++ b/preview/components/context-menu-style-default.tsx @@ -6,7 +6,11 @@ export default function ContextMenuStyleDefault() { return (
- + Right click here From cb05fd1873a74aa5e3875a8a3a28bcc756da53fb Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Thu, 21 Aug 2025 17:36:34 +0530 Subject: [PATCH 3/4] added context menu to shadcn registry --- public/r/accordion.json | 2 +- public/r/badge-style-variants.json | 2 +- public/r/button.json | 2 +- public/r/context-menu.json | 19 ++ public/r/select.json | 2 +- public/r/table.json | 2 +- registry.json | 375 ++++++++--------------------- 7 files changed, 126 insertions(+), 278 deletions(-) create mode 100644 public/r/context-menu.json diff --git a/public/r/accordion.json b/public/r/accordion.json index d2b17b9..ce37f95 100644 --- a/public/r/accordion.json +++ b/public/r/accordion.json @@ -11,7 +11,7 @@ "files": [ { "path": "components/retroui/Accordion.tsx", - "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAccordionItem.displayName = AccordionPrimitive.Item.displayName;\n\nconst AccordionHeader = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n svg]:rotate-180\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n));\nAccordionHeader.displayName = AccordionPrimitive.Header.displayName;\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n
{children}
\n \n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nconst AccordionComponent = Object.assign(Accordion, {\n Item: AccordionItem,\n Header: AccordionHeader,\n Content: AccordionContent,\n});\n\nexport { AccordionComponent as Accordion };\n", + "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAccordionItem.displayName = AccordionPrimitive.Item.displayName;\n\nconst AccordionHeader = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n svg]:rotate-180\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n));\nAccordionHeader.displayName = AccordionPrimitive.Header.displayName;\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n
{children}
\n \n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nconst AccordionComponent = Object.assign(Accordion, {\n Item: AccordionItem,\n Header: AccordionHeader,\n Content: AccordionContent,\n});\n\nexport { AccordionComponent as Accordion };\n", "type": "registry:component", "target": "components/retroui/Accordion.tsx" } diff --git a/public/r/badge-style-variants.json b/public/r/badge-style-variants.json index 73656aa..a9ad1c8 100644 --- a/public/r/badge-style-variants.json +++ b/public/r/badge-style-variants.json @@ -9,7 +9,7 @@ "files": [ { "path": "preview/components/badge-style-variants.tsx", - "content": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleVariants() {\n return (\n
\n Default\n Outlined\n Solid\n Surface\n
\n );\n}\n", + "content": "import { Badge } from \"@/components/retroui/Badge\";\n\nexport default function BadgeStyleVariants() {\n return (\n
\n Default\n Outlined\n Solid\n Surface\n
\n );\n}\n", "type": "registry:block", "target": "components/retroui/preview/badge-style-variants.tsx" } diff --git a/public/r/button.json b/public/r/button.json index 33d9158..f90dcb3 100644 --- a/public/r/button.json +++ b/public/r/button.json @@ -10,7 +10,7 @@ "files": [ { "path": "components/retroui/Button.tsx", - "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nconst buttonVariants = cva(\n \"font-head transition-all outline-hidden cursor-pointer duration-200 font-medium flex items-center\",\n {\n variants: {\n variant: {\n default:\n \"shadow-md hover:shadow-none bg-primary text-black border-2 border-black transition hover:translate-y-1 hover:bg-primary-hover\",\n secondary:\n \"shadow-md hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1\",\n outline:\n \"shadow-md hover:shadow-none bg-transparent border-2 transition hover:translate-y-1\",\n link: \"bg-transparent hover:underline\",\n },\n size: {\n sm: \"px-3 py-1 text-sm shadow hover:shadow-none\",\n md: \"px-4 py-1.5 text-base\",\n lg: \"px-8 py-3 text-lg\",\n icon: \"p-2\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"default\",\n },\n },\n);\n\nexport interface IButtonProps\n extends ButtonHTMLAttributes,\n VariantProps {}\n\nexport const Button = React.forwardRef(\n (\n {\n children,\n size = \"md\",\n className = \"\",\n variant = \"default\",\n ...props\n }: IButtonProps,\n forwardedRef,\n ) => (\n \n {children}\n \n ),\n);\n\nButton.displayName = \"Button\";\n", + "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nconst buttonVariants = cva(\n \"font-head transition-all outline-hidden cursor-pointer duration-200 font-medium flex items-center\",\n {\n variants: {\n variant: {\n default:\n \"shadow-md hover:shadow-none bg-primary text-black border-2 border-black transition hover:translate-y-1 hover:bg-primary-hover\",\n secondary:\n \"shadow-md hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1\",\n outline:\n \"shadow-md hover:shadow-none bg-transparent border-2 transition hover:translate-y-1\",\n link: \"bg-transparent hover:underline\",\n },\n size: {\n sm: \"px-3 py-1 text-sm shadow hover:shadow-none\",\n md: \"px-4 py-1.5 text-base\",\n lg: \"px-8 py-3 text-lg\",\n icon: \"p-2\",\n },\n },\n defaultVariants: {\n size: \"md\",\n variant: \"default\",\n },\n },\n);\n\nexport interface IButtonProps\n extends ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nexport const Button = React.forwardRef(\n (\n {\n children,\n size = \"md\",\n className = \"\",\n variant = \"default\",\n asChild = false,\n ...props\n }: IButtonProps,\n forwardedRef,\n ) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n \n {children}\n \n );\n },\n);\n\nButton.displayName = \"Button\";\n", "type": "registry:component", "target": "components/retroui/Button.tsx" } diff --git a/public/r/context-menu.json b/public/r/context-menu.json new file mode 100644 index 0000000..f0e1603 --- /dev/null +++ b/public/r/context-menu.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "context-menu", + "type": "registry:component", + "title": "Context Menu", + "description": "Show contextual actions on right-click.", + "dependencies": [ + "@radix-ui/react-context-menu", + "lucide-react" + ], + "files": [ + { + "path": "components/retroui/ContextMenu.tsx", + "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction ContextMenu({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction ContextMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuSub({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction ContextMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction ContextMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n \n );\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction ContextMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n );\n}\n\nconst ContextMenuComponent = Object.assign(ContextMenu, {\n Trigger: ContextMenuTrigger,\n Content: ContextMenuContent,\n Item: ContextMenuItem,\n CheckboxItem: ContextMenuCheckboxItem,\n RadioItem: ContextMenuRadioItem,\n Label: ContextMenuLabel,\n Separator: ContextMenuSeparator,\n Shortcut: ContextMenuShortcut,\n Group: ContextMenuGroup,\n Portal: ContextMenuPortal,\n Sub: ContextMenuSub,\n SubContent: ContextMenuSubContent,\n SubTrigger: ContextMenuSubTrigger,\n RadioGroup: ContextMenuRadioGroup,\n});\n\nexport { ContextMenuComponent as ContextMenu };\n", + "type": "registry:component", + "target": "components/retroui/ContextMenu.tsx" + } + ] +} \ No newline at end of file diff --git a/public/r/select.json b/public/r/select.json index b363033..3d69398 100644 --- a/public/r/select.json +++ b/public/r/select.json @@ -11,7 +11,7 @@ "files": [ { "path": "components/retroui/Select.tsx", - "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n className,\n children,\n ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n return (\n \n {children}\n \n \n \n \n );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n className,\n children,\n position = \"popper\",\n ...props\n}: SelectPrimitive.SelectContentProps) => {\n return (\n \n \n \n {children}\n \n \n \n );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n className,\n children,\n ...props\n}: SelectPrimitive.SelectItemProps) => (\n \n {children}\n\n \n \n \n \n \n \n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n Trigger: SelectTrigger,\n Value: SelectValue,\n Icon: SelectIcon,\n Content: SelectContent,\n Group: SelectGroup,\n Item: SelectItem,\n Label: SelectLabel,\n Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n", + "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n className,\n children,\n ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n return (\n \n {children}\n \n \n \n \n );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n className,\n children,\n position = \"popper\",\n ...props\n}: SelectPrimitive.SelectContentProps) => {\n return (\n \n \n \n \n \n \n {children}\n \n \n \n \n \n \n );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n className,\n children,\n ...props\n}: SelectPrimitive.SelectItemProps) => (\n \n {children}\n\n \n \n \n \n \n \n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n Trigger: SelectTrigger,\n Value: SelectValue,\n Icon: SelectIcon,\n Content: SelectContent,\n Group: SelectGroup,\n Item: SelectItem,\n Label: SelectLabel,\n Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n", "type": "registry:component", "target": "components/retroui/Select.tsx" } diff --git a/public/r/table.json b/public/r/table.json index d4e7234..8079e1c 100644 --- a/public/r/table.json +++ b/public/r/table.json @@ -7,7 +7,7 @@ "files": [ { "path": "components/retroui/Table.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n //
\n \n //
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n tr]:last:border-b-0\",\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nconst TableObj = Object.assign(Table, {\n Header: TableHeader,\n Body: TableBody,\n Footer: TableFooter,\n Row: TableRow,\n Head: TableHead,\n Cell: TableCell,\n Caption: TableCaption,\n})\n\nexport {\n TableObj as Table,\n}", + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n tr]:last:border-b-0\",\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nconst TableObj = Object.assign(Table, {\n Header: TableHeader,\n Body: TableBody,\n Footer: TableFooter,\n Row: TableRow,\n Head: TableHead,\n Cell: TableCell,\n Caption: TableCaption,\n})\n\nexport {\n TableObj as Table,\n}", "type": "registry:component", "target": "components/retroui/Table.tsx" } diff --git a/registry.json b/registry.json index 496f800..4a91f94 100644 --- a/registry.json +++ b/registry.json @@ -2,10 +2,7 @@ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "retro ui", "homepage": "https://retroui.dev", - "dependencies": [ - "tailwind-merge", - "clsx" - ], + "dependencies": ["tailwind-merge", "clsx"], "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", @@ -58,10 +55,7 @@ "name": "utils", "type": "registry:lib", "title": "Utils", - "dependencies": [ - "clsx", - "tailwind-merge" - ], + "dependencies": ["clsx", "tailwind-merge"], "files": [ { "path": "lib/utils.ts", @@ -74,10 +68,7 @@ "type": "registry:component", "title": "Accordion", "description": "This collapsible component let's your users read only the content they care about. 😌", - "dependencies": [ - "@radix-ui/react-accordion", - "lucide-react" - ], + "dependencies": ["@radix-ui/react-accordion", "lucide-react"], "files": [ { "path": "components/retroui/Accordion.tsx", @@ -91,9 +82,7 @@ "type": "registry:component", "title": "Alert", "description": "Notify your users about important events and updates. 📣", - "dependencies": [ - "class-variance-authority" - ], + "dependencies": ["class-variance-authority"], "files": [ { "path": "components/retroui/Alert.tsx", @@ -107,9 +96,7 @@ "type": "registry:component", "title": "Avatar", "description": "Default rounded avatar that can show your users profile picture. ✨", - "dependencies": [ - "@radix-ui/react-avatar" - ], + "dependencies": ["@radix-ui/react-avatar"], "files": [ { "path": "components/retroui/Avatar.tsx", @@ -123,9 +110,7 @@ "type": "registry:component", "title": "Badge", "description": "The component that looks like a button but isn't clickable!", - "dependencies": [ - "class-variance-authority" - ], + "dependencies": ["class-variance-authority"], "files": [ { "path": "components/retroui/Badge.tsx", @@ -139,9 +124,7 @@ "type": "registry:component", "title": "Retro Button", "description": "This bold button makes sure your users click on it and perform the actions you want!", - "dependencies": [ - "class-variance-authority" - ], + "dependencies": ["class-variance-authority"], "files": [ { "path": "components/retroui/Button.tsx", @@ -223,10 +206,7 @@ "type": "registry:component", "title": "Label", "description": "Label for form fields", - "dependencies": [ - "@radix-ui/react-label", - "class-variance-authority" - ], + "dependencies": ["@radix-ui/react-label", "class-variance-authority"], "files": [ { "path": "components/retroui/Label.tsx", @@ -240,9 +220,7 @@ "type": "registry:component", "title": "Menu", "description": "Show your users a list of actions they can take. 📋", - "dependencies": [ - "@radix-ui/react-dropdown-menu" - ], + "dependencies": ["@radix-ui/react-dropdown-menu"], "files": [ { "path": "components/retroui/Menu.tsx", @@ -251,15 +229,26 @@ } ] }, + { + "name": "context-menu", + "type": "registry:component", + "title": "Context Menu", + "description": "Show contextual actions on right-click.", + "dependencies": ["@radix-ui/react-context-menu", "lucide-react"], + "files": [ + { + "path": "components/retroui/ContextMenu.tsx", + "target": "components/retroui/ContextMenu.tsx", + "type": "registry:component" + } + ] + }, { "name": "popover", "type": "registry:component", "title": "Popover", "description": "A handy small component for your little input needs...😉", - "dependencies": [ - "@radix-ui/react-popover", - "class-variance-authority" - ], + "dependencies": ["@radix-ui/react-popover", "class-variance-authority"], "author": "Ankan Bhattacharya ", "files": [ { @@ -274,9 +263,7 @@ "type": "registry:component", "title": "Progress", "description": "Show progress...", - "dependencies": [ - "@radix-ui/react-progress" - ], + "dependencies": ["@radix-ui/react-progress"], "files": [ { "path": "components/retroui/Progress.tsx", @@ -307,10 +294,7 @@ "type": "registry:component", "title": "Select", "description": "Let your users pick what they want.", - "dependencies": [ - "@radix-ui/react-select", - "lucide-react" - ], + "dependencies": ["@radix-ui/react-select", "lucide-react"], "files": [ { "path": "components/retroui/Select.tsx", @@ -324,10 +308,7 @@ "type": "registry:component", "title": "Slider", "description": "Let your users pick what they want.", - "dependencies": [ - "@radix-ui/react-slider", - "lucide-react" - ], + "dependencies": ["@radix-ui/react-slider", "lucide-react"], "files": [ { "path": "components/retroui/Slider.tsx", @@ -341,11 +322,7 @@ "type": "registry:component", "title": "Sonner", "description": "A beautiful toast component that can grab audience attention from any place.", - "dependencies": [ - "sonner", - "lucide-react", - "class-variance-authority" - ], + "dependencies": ["sonner", "lucide-react", "class-variance-authority"], "files": [ { "path": "components/retroui/Sonner.tsx", @@ -359,9 +336,7 @@ "type": "registry:component", "title": "Switch", "description": "Let users to turn on or off your marketing emails or notifications.", - "dependencies": [ - "@radix-ui/react-switch" - ], + "dependencies": ["@radix-ui/react-switch"], "files": [ { "path": "components/retroui/Switch.tsx", @@ -375,9 +350,7 @@ "type": "registry:component", "title": "Tab", "description": "Switch between different views using tabs.", - "dependencies": [ - "@headlessui/react" - ], + "dependencies": ["@headlessui/react"], "files": [ { "path": "components/retroui/Tab.tsx", @@ -404,9 +377,7 @@ "type": "registry:component", "title": "text", "description": "Show your texts in different styles. 💅", - "dependencies": [ - "class-variance-authority" - ], + "dependencies": ["class-variance-authority"], "files": [ { "path": "components/retroui/Text.tsx", @@ -433,10 +404,7 @@ "type": "registry:component", "title": "Toggle", "description": "This crazy toggling button keeps people toggling...😃", - "dependencies": [ - "@radix-ui/react-toggle", - "class-variance-authority" - ], + "dependencies": ["@radix-ui/react-toggle", "class-variance-authority"], "author": "Ankan Bhattacharya ", "files": [ { @@ -475,10 +443,7 @@ "type": "registry:component", "title": "Tooltip", "description": "A cool way to give your users a hint of what a component does...😉", - "dependencies": [ - "@radix-ui/react-tooltip", - "class-variance-authority" - ], + "dependencies": ["@radix-ui/react-tooltip", "class-variance-authority"], "author": "Ankan Bhattacharya ", "files": [ { @@ -493,9 +458,7 @@ "type": "registry:component", "title": "Area Chart", "description": "Beautiful area chart for data visualization with retro styling", - "dependencies": [ - "recharts" - ], + "dependencies": ["recharts"], "files": [ { "path": "components/retroui/charts/AreaChart.tsx", @@ -509,9 +472,7 @@ "type": "registry:component", "title": "Bar Chart", "description": "Beautiful bar chart for data visualization with retro styling", - "dependencies": [ - "recharts" - ], + "dependencies": ["recharts"], "files": [ { "path": "components/retroui/charts/BarChart.tsx", @@ -525,9 +486,7 @@ "type": "registry:component", "title": "Line Chart", "description": "Beautiful line chart for data visualization with retro styling", - "dependencies": [ - "recharts" - ], + "dependencies": ["recharts"], "files": [ { "path": "components/retroui/charts/LineChart.tsx", @@ -541,9 +500,7 @@ "type": "registry:component", "title": "Pie Chart", "description": "Beautiful pie chart for data visualization with retro styling", - "dependencies": [ - "recharts" - ], + "dependencies": ["recharts"], "files": [ { "path": "components/retroui/charts/PieChart.tsx", @@ -556,9 +513,7 @@ "name": "accordion-style-default", "title": "accordion-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/accordion.json" - ], + "registryDependencies": ["https://retroui.dev/r/accordion.json"], "files": [ { "path": "preview/components/accordion-style-default.tsx", @@ -571,9 +526,7 @@ "name": "alert-style-default", "title": "alert-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], + "registryDependencies": ["https://retroui.dev/r/alert.json"], "files": [ { "path": "preview/components/alert-style-default.tsx", @@ -586,9 +539,7 @@ "name": "alert-style-solid", "title": "alert-style-solid", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], + "registryDependencies": ["https://retroui.dev/r/alert.json"], "files": [ { "path": "preview/components/alert-style-solid.tsx", @@ -601,9 +552,7 @@ "name": "alert-style-with-icon", "title": "alert-style-with-icon", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], + "registryDependencies": ["https://retroui.dev/r/alert.json"], "files": [ { "path": "preview/components/alert-style-with-icon.tsx", @@ -616,9 +565,7 @@ "name": "alert-style-all-status", "title": "alert-style-all-status", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/alert.json" - ], + "registryDependencies": ["https://retroui.dev/r/alert.json"], "files": [ { "path": "preview/components/alert-style-all-status.tsx", @@ -631,9 +578,7 @@ "name": "avatar-style-circle", "title": "avatar-style-circle", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/avatar.json" - ], + "registryDependencies": ["https://retroui.dev/r/avatar.json"], "files": [ { "path": "preview/components/avatar-style-circle.tsx", @@ -646,9 +591,7 @@ "name": "avatar-style-fallbacks", "title": "avatar-style-fallbacks", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/avatar.json" - ], + "registryDependencies": ["https://retroui.dev/r/avatar.json"], "files": [ { "path": "preview/components/avatar-style-circle-fallbacks.tsx", @@ -661,9 +604,7 @@ "name": "avatar-style-circle-sizes", "title": "avatar-style-circle-sizes", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/avatar.json" - ], + "registryDependencies": ["https://retroui.dev/r/avatar.json"], "files": [ { "path": "preview/components/avatar-style-circle-sizes.tsx", @@ -676,9 +617,7 @@ "name": "badge-style-default", "title": "badge-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/badge.json" - ], + "registryDependencies": ["https://retroui.dev/r/badge.json"], "files": [ { "path": "preview/components/badge-style-default.tsx", @@ -691,9 +630,7 @@ "name": "badge-style-variants", "title": "badge-style-variants", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/badge.json" - ], + "registryDependencies": ["https://retroui.dev/r/badge.json"], "files": [ { "path": "preview/components/badge-style-variants.tsx", @@ -706,9 +643,7 @@ "name": "badge-style-default", "title": "badge-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/badge.json" - ], + "registryDependencies": ["https://retroui.dev/r/badge.json"], "files": [ { "path": "preview/components/badge-style-rounded.tsx", @@ -721,9 +656,7 @@ "name": "badge-style-sizes", "title": "badge-style-sizes", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/badge.json" - ], + "registryDependencies": ["https://retroui.dev/r/badge.json"], "files": [ { "path": "preview/components/badge-style-sizes.tsx", @@ -736,9 +669,7 @@ "name": "button-style-default", "title": "button-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/button.json" - ], + "registryDependencies": ["https://retroui.dev/r/button.json"], "files": [ { "path": "preview/components/button-style-default.tsx", @@ -766,9 +697,7 @@ "name": "button-style-secondary", "title": "button-style-secondary", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/button.json" - ], + "registryDependencies": ["https://retroui.dev/r/button.json"], "files": [ { "path": "preview/components/button-style-secondary.tsx", @@ -781,9 +710,7 @@ "name": "button-style-outline", "title": "button-style-outline", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/button.json" - ], + "registryDependencies": ["https://retroui.dev/r/button.json"], "files": [ { "path": "preview/components/button-style-outline.tsx", @@ -796,9 +723,7 @@ "name": "button-style-link", "title": "button-style-link", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/button.json" - ], + "registryDependencies": ["https://retroui.dev/r/button.json"], "files": [ { "path": "preview/components/button-style-link.tsx", @@ -811,9 +736,7 @@ "name": "button-style-with-icon", "title": "button-style-with-icon", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/button.json" - ], + "registryDependencies": ["https://retroui.dev/r/button.json"], "files": [ { "path": "preview/components/button-style-with-icon.tsx", @@ -826,9 +749,7 @@ "name": "card-style-default", "title": "card-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/card.json" - ], + "registryDependencies": ["https://retroui.dev/r/card.json"], "files": [ { "path": "preview/components/card-style-default.tsx", @@ -841,9 +762,7 @@ "name": "card-style-commerce", "title": "card-style-commerce", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/card.json" - ], + "registryDependencies": ["https://retroui.dev/r/card.json"], "files": [ { "path": "preview/components/card-style-commerce.tsx", @@ -856,9 +775,7 @@ "name": "card-style-testimonial", "title": "card-style-testimonial", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/card.json" - ], + "registryDependencies": ["https://retroui.dev/r/card.json"], "files": [ { "path": "preview/components/card-style-testimonial.tsx", @@ -871,9 +788,7 @@ "name": "checkbox-style-default", "title": "checkbox-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/checkbox.json" - ], + "registryDependencies": ["https://retroui.dev/r/checkbox.json"], "files": [ { "path": "preview/components/checkbox-style-default.tsx", @@ -886,9 +801,7 @@ "name": "checkbox-style-toggle", "title": "checkbox-style-toggle", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/checkbox.json" - ], + "registryDependencies": ["https://retroui.dev/r/checkbox.json"], "files": [ { "path": "preview/components/checkbox-style-variants.tsx", @@ -901,9 +814,7 @@ "name": "checkbox-style-default", "title": "checkbox-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/checkbox.json" - ], + "registryDependencies": ["https://retroui.dev/r/checkbox.json"], "files": [ { "path": "preview/components/checkbox-style-sizes.tsx", @@ -916,9 +827,7 @@ "name": "input-style-default", "title": "input-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/input.json" - ], + "registryDependencies": ["https://retroui.dev/r/input.json"], "files": [ { "path": "preview/components/input-style-default.tsx", @@ -931,9 +840,7 @@ "name": "input-style-with-label", "title": "input-style-with-label", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/input.json" - ], + "registryDependencies": ["https://retroui.dev/r/input.json"], "files": [ { "path": "preview/components/input-style-with-label.tsx", @@ -946,9 +853,7 @@ "name": "input-style-error", "title": "input-style-error", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/input.json" - ], + "registryDependencies": ["https://retroui.dev/r/input.json"], "files": [ { "path": "preview/components/input-style-error.tsx", @@ -961,9 +866,7 @@ "name": "menu-style-default", "title": "menu-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/menu.json" - ], + "registryDependencies": ["https://retroui.dev/r/menu.json"], "files": [ { "path": "preview/components/menu-style-default.tsx", @@ -976,9 +879,7 @@ "name": "progress-style-default", "title": "progress-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/progress.json" - ], + "registryDependencies": ["https://retroui.dev/r/progress.json"], "files": [ { "path": "preview/components/progress-style-default.tsx", @@ -991,9 +892,7 @@ "name": "radio-style-default", "title": "radio-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/radio.json" - ], + "registryDependencies": ["https://retroui.dev/r/radio.json"], "files": [ { "path": "preview/components/radio-style-default.tsx", @@ -1006,9 +905,7 @@ "name": "radio-style-variants", "title": "radio-style-variants", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/radio.json" - ], + "registryDependencies": ["https://retroui.dev/r/radio.json"], "files": [ { "path": "preview/components/radio-style-variants.tsx", @@ -1021,9 +918,7 @@ "name": "radio-style-sizes", "title": "radio-style-sizes", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/radio.json" - ], + "registryDependencies": ["https://retroui.dev/r/radio.json"], "files": [ { "path": "preview/components/radio-style-sizes.tsx", @@ -1036,9 +931,7 @@ "name": "select-style-default", "title": "select-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/select.json" - ], + "registryDependencies": ["https://retroui.dev/r/select.json"], "files": [ { "path": "preview/components/select-style-default.tsx", @@ -1051,9 +944,7 @@ "name": "switch-style-default", "title": "switch-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/switch.json" - ], + "registryDependencies": ["https://retroui.dev/r/switch.json"], "files": [ { "path": "preview/components/switch-style-default.tsx", @@ -1066,9 +957,7 @@ "name": "switch-style-disabled", "title": "switch-style-disabled", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/switch.json" - ], + "registryDependencies": ["https://retroui.dev/r/switch.json"], "files": [ { "path": "preview/components/switch-style-disabled.tsx", @@ -1081,9 +970,7 @@ "name": "table-style-default", "title": "table-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/table.json" - ], + "registryDependencies": ["https://retroui.dev/r/table.json"], "files": [ { "path": "preview/components/table-style-default.tsx", @@ -1096,9 +983,7 @@ "name": "table-with-checkbox", "title": "table-with-checkbox", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/table.json" - ], + "registryDependencies": ["https://retroui.dev/r/table.json"], "files": [ { "path": "preview/components/table-with-checkbox.tsx", @@ -1111,9 +996,7 @@ "name": "table-with-sticky-header", "title": "table-with-sticky-header", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/table.json" - ], + "registryDependencies": ["https://retroui.dev/r/table.json"], "files": [ { "path": "preview/components/table-with-sticky-header.tsx", @@ -1126,9 +1009,7 @@ "name": "textarea-style-default", "title": "textarea-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/textarea.json" - ], + "registryDependencies": ["https://retroui.dev/r/textarea.json"], "files": [ { "path": "preview/components/textarea-style-default.tsx", @@ -1141,9 +1022,7 @@ "name": "text-headings", "title": "text-headings", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/text.json" - ], + "registryDependencies": ["https://retroui.dev/r/text.json"], "files": [ { "path": "preview/components/text-headings.tsx", @@ -1156,9 +1035,7 @@ "name": "typography-p", "title": "typography-p", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/text.json" - ], + "registryDependencies": ["https://retroui.dev/r/text.json"], "files": [ { "path": "preview/components/typography-p.tsx", @@ -1171,9 +1048,7 @@ "name": "tab-style-default", "title": "tab-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/tab.json" - ], + "registryDependencies": ["https://retroui.dev/r/tab.json"], "files": [ { "path": "preview/components/tab-style-default.tsx", @@ -1186,9 +1061,7 @@ "name": "dialog-style-default", "title": "dialog-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/dialog.json" - ], + "registryDependencies": ["https://retroui.dev/r/dialog.json"], "files": [ { "path": "preview/components/dialog-style-default.tsx", @@ -1201,9 +1074,7 @@ "name": "dialog-style-with-footer", "title": "dialog-style-with-footer", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/dialog.json" - ], + "registryDependencies": ["https://retroui.dev/r/dialog.json"], "files": [ { "path": "preview/components/dialog-style-with-footer.tsx", @@ -1216,9 +1087,7 @@ "name": "dialog-style-width-variant", "title": "dialog-style-width-variant", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/dialog.json" - ], + "registryDependencies": ["https://retroui.dev/r/dialog.json"], "files": [ { "path": "preview/components/dialog-style-width-variant.tsx", @@ -1231,9 +1100,7 @@ "name": "dialog-style-with-form", "title": "dialog-style-with-form", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/dialog.json" - ], + "registryDependencies": ["https://retroui.dev/r/dialog.json"], "files": [ { "path": "preview/components/dialog-style-with-form.tsx", @@ -1246,12 +1113,8 @@ "name": "toggle-style-default", "title": "toggle-style-default", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/toggle.json" - ], - "dependencies": [ - "lucide-react" - ], + "registryDependencies": ["https://retroui.dev/r/toggle.json"], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-style-default.tsx", @@ -1264,12 +1127,8 @@ "name": "toggle-style-outline-muted", "title": "toggle-style-outline-muted", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/toggle.json" - ], - "dependencies": [ - "lucide-react" - ], + "registryDependencies": ["https://retroui.dev/r/toggle.json"], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-style-outline-muted.tsx", @@ -1282,12 +1141,8 @@ "name": "toggle-style-outlined", "title": "toggle-style-outlined", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/toggle.json" - ], - "dependencies": [ - "lucide-react" - ], + "registryDependencies": ["https://retroui.dev/r/toggle.json"], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-style-outlined.tsx", @@ -1300,12 +1155,8 @@ "name": "toggle-style-solid", "title": "toggle-style-solid", "type": "registry:block", - "registryDependencies": [ - "https://retroui.dev/r/toggle.json" - ], - "dependencies": [ - "lucide-react" - ], + "registryDependencies": ["https://retroui.dev/r/toggle.json"], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-style-solid.tsx", @@ -1322,9 +1173,7 @@ "https://retroui.dev/r/toggle.json", "https://retroui.dev/r/toggle-group.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-group-style-default.tsx", @@ -1341,9 +1190,7 @@ "https://retroui.dev/r/toggle.json", "https://retroui.dev/r/toggle-group.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-group-style-outline-muted.tsx", @@ -1360,9 +1207,7 @@ "https://retroui.dev/r/toggle.json", "https://retroui.dev/r/toggle-group.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-group-style-outlined.tsx", @@ -1379,9 +1224,7 @@ "https://retroui.dev/r/toggle.json", "https://retroui.dev/r/toggle-group.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/toggle-group-style-solid.tsx", @@ -1398,9 +1241,7 @@ "https://retroui.dev/r/tooltip.json", "https://retroui.dev/r/button.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/tooltip-style-default.tsx", @@ -1417,9 +1258,7 @@ "https://retroui.dev/r/tooltip.json", "https://retroui.dev/r/button.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/tooltip-style-primary.tsx", @@ -1436,9 +1275,7 @@ "https://retroui.dev/r/tooltip.json", "https://retroui.dev/r/button.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/tooltip-style-solid.tsx", @@ -1455,9 +1292,7 @@ "https://retroui.dev/r/sonner.json", "https://retroui.dev/r/button.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/sonner-style-default.tsx", @@ -1474,9 +1309,7 @@ "https://retroui.dev/r/sonner.json", "https://retroui.dev/r/button.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/sonner-style-error.tsx", @@ -1495,9 +1328,7 @@ "https://retroui.dev/r/input.json", "https://retroui.dev/r/button.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/popover-style-default.tsx", @@ -1516,9 +1347,7 @@ "https://retroui.dev/r/input.json", "https://retroui.dev/r/button.json" ], - "dependencies": [ - "lucide-react" - ], + "dependencies": ["lucide-react"], "files": [ { "path": "preview/components/popover-style-default-shadow.tsx", @@ -1528,4 +1357,4 @@ ] } ] -} \ No newline at end of file +} From a1624cf1be29838e96f042bb4de91657bc4cf97f Mon Sep 17 00:00:00 2001 From: Arif Hossain Date: Sun, 24 Aug 2025 23:16:56 +0600 Subject: [PATCH 4/4] Update components.ts --- config/components.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/config/components.ts b/config/components.ts index 8d5582e..f49fff7 100644 --- a/config/components.ts +++ b/config/components.ts @@ -610,6 +610,7 @@ export const componentConfig: { preview: lazy( () => import("@/preview/components/context-menu-style-default"), ), + }, "loader-style-default": { name: "loader-style-default", filePath: "preview/components/loader-style-default.tsx",