Skip to content

Commit de0b627

Browse files
ariflogsariflogs
committed
✅ Radio
1 parent e13259d commit de0b627

File tree

12 files changed

+334
-5
lines changed

12 files changed

+334
-5
lines changed

‎app/(sink)/demo/components/page.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
TabsTriggerList,
1616
} from "@/packages/ui";
1717
import { Card } from "@/packages/ui/Cards/Card";
18+
import { RadioGroup } from "@/packages/ui/Form/Radio";
1819
import BadgeStyleVariants from "@/preview/components/badge-style-variants";
1920
import TestimonialCard from "@/preview/components/card-style-testimonial";
2021
import { CheckCircle } from "lucide-react";
@@ -41,6 +42,14 @@ export default function page() {
4142
<Checkbox size="lg" />
4243
</div>
4344

45+
<div className="space-x-4">
46+
<RadioGroup>
47+
<RadioGroup.Item value="1">Option 1</RadioGroup.Item>
48+
<RadioGroup.Item value="2">Option 2</RadioGroup.Item>
49+
<RadioGroup.Item value="3">Option 3</RadioGroup.Item>
50+
</RadioGroup>
51+
</div>
52+
4453
<div className="flex items-center space-x-4">
4554
<Avatar>
4655
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />

‎config/components.ts

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
import { lazy } from "react";
22

3-
export const componentConfig = {
3+
export const componentConfig: {
4+
core: {
5+
[key: string]: {
6+
name: string;
7+
filePath: string;
8+
preview?: React.LazyExoticComponent<() => JSX.Element>;
9+
};
10+
};
11+
examples: {
12+
[key: string]: {
13+
name: string;
14+
filePath: string;
15+
preview: React.LazyExoticComponent<() => JSX.Element>;
16+
};
17+
};
18+
} = {
419
core: {
520
accordion: {
621
name: "accordion",
@@ -38,6 +53,10 @@ export const componentConfig = {
3853
name: "menu",
3954
filePath: "packages/ui/Menu/Menu.tsx",
4055
},
56+
radio: {
57+
name: "radio",
58+
filePath: "packages/ui/Form/Radio.tsx",
59+
},
4160
text: {
4261
name: "text",
4362
filePath: "packages/ui/Text/Text.tsx",
@@ -163,9 +182,11 @@ export const componentConfig = {
163182
filePath: "preview/components/checkbox-style-sizes.tsx",
164183
preview: lazy(() => import("@/preview/components/checkbox-style-sizes")),
165184
},
166-
"dropdown-style-default": {
167-
name: "dropdown-style-default",
168-
},
185+
// "dropdown-style-default": {
186+
// name: "dropdown-style-default",
187+
// filePath: "preview/components/dropdown-style-default.tsx",
188+
// preview: lazy(() => import("@/preview/components/dropdown-style-default")),
189+
// },
169190
"input-style-default": {
170191
name: "input-style-default",
171192
filePath: "preview/components/input-style-default.tsx",
@@ -176,6 +197,21 @@ export const componentConfig = {
176197
filePath: "preview/components/menu-style-default.tsx",
177198
preview: lazy(() => import("@/preview/components/menu-style-default")),
178199
},
200+
"radio-style-default": {
201+
name: "radio-style-default",
202+
filePath: "preview/components/radio-style-default.tsx",
203+
preview: lazy(() => import("@/preview/components/radio-style-default")),
204+
},
205+
"radio-style-variants": {
206+
name: "radio-style-variants",
207+
filePath: "preview/components/radio-style-variants.tsx",
208+
preview: lazy(() => import("@/preview/components/radio-style-variants")),
209+
},
210+
"radio-style-sizes": {
211+
name: "radio-style-sizes",
212+
filePath: "preview/components/radio-style-sizes.tsx",
213+
preview: lazy(() => import("@/preview/components/radio-style-sizes")),
214+
},
179215
"textarea-style-default": {
180216
name: "textarea-style-default",
181217
filePath: "preview/components/textarea-style-default.tsx",

‎config/navigation.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const navConfig: INavigationConfig = {
2727
{ title: "Dialog", href: `${componentsRoute}/dialog` },
2828
{ title: "Input", href: `${componentsRoute}/input` },
2929
{ title: "Menu", href: `${componentsRoute}/menu` },
30+
{ title: "Radio", href: `${componentsRoute}/radio`, tag: "New" },
3031
{ title: "Tab", href: `${componentsRoute}/tab` },
3132
{ title: "Textarea", href: `${componentsRoute}/textarea` },
3233
{ title: "Text", href: `${componentsRoute}/text` },

‎content/docs/components/radio.mdx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: Radio
3+
description: Sometimes you need to pick multiple options! That's where the Radio component comes into play.
4+
lastUpdated: 20 Feb, 2024
5+
links:
6+
api_reference: https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference
7+
source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/Radio.tsx
8+
---
9+
10+
<ComponentShowcase name="radio-style-default" />
11+
<br />
12+
<br />
13+
14+
## Installation
15+
16+
#### 1. Install dependencies:
17+
18+
```sh
19+
npm install @radix-ui/react-radio-group class-variance-authority
20+
```
21+
22+
<br />
23+
24+
#### 2. Copy the code 👇 into your project:
25+
26+
<ComponentSource name="radio" />
27+
<br />
28+
<br />
29+
30+
## Examples
31+
32+
### Variants
33+
34+
<ComponentShowcase name="radio-style-variants" />
35+
<br />
36+
<br />
37+
38+
### Sizes
39+
40+
<ComponentShowcase name="radio-style-sizes" />
41+
<br />
42+
<br />

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@radix-ui/react-checkbox": "^1.1.4",
1616
"@radix-ui/react-dialog": "^1.1.2",
1717
"@radix-ui/react-dropdown-menu": "^2.1.2",
18+
"@radix-ui/react-radio-group": "^1.2.3",
1819
"@radix-ui/react-visually-hidden": "^1.1.0",
1920
"class-variance-authority": "^0.7.0",
2021
"clsx": "^2.1.1",

‎packages/ui/Form/Checkbox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Check } from "lucide-react";
66
const checkboxVariants = cva("border-black border-2", {
77
variants: {
88
variant: {
9-
default: " data-[state=checked]:bg-primary-400",
9+
default: " data-[state=checked]:bg-primary-500",
1010
outline: "",
1111
solid: "data-[state=checked]:bg-black *:text-white",
1212
},

‎packages/ui/Form/Radio.tsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { cn } from "@/lib/utils";
2+
import * as RadioPrimitive from "@radix-ui/react-radio-group";
3+
import { cva, VariantProps } from "class-variance-authority";
4+
5+
const radioVariants = cva("border-black border-2", {
6+
variants: {
7+
variant: {
8+
default: "",
9+
outline: "",
10+
solid: "",
11+
},
12+
size: {
13+
sm: "h-4 w-4",
14+
md: "h-5 w-5",
15+
lg: "h-6 w-6",
16+
},
17+
},
18+
defaultVariants: {
19+
variant: "default",
20+
size: "md",
21+
},
22+
});
23+
24+
const radioIndicatorVariants = cva("flex ", {
25+
variants: {
26+
variant: {
27+
default: "bg-primary-500 border-2 border-black",
28+
outline: "border-2 border-black",
29+
solid: "bg-black",
30+
},
31+
size: {
32+
sm: "h-2 w-2",
33+
md: "h-2.5 w-2.5",
34+
lg: "h-3.5 w-3.5",
35+
},
36+
},
37+
defaultVariants: {
38+
variant: "default",
39+
size: "md",
40+
},
41+
});
42+
43+
interface RadioGroupProps
44+
extends React.ComponentProps<typeof RadioPrimitive.Root> {}
45+
46+
export const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (
47+
<RadioPrimitive.Root className={cn("grid gap-2", className)} {...props} />
48+
);
49+
50+
interface RadioProps
51+
extends React.ComponentProps<typeof RadioPrimitive.Item>,
52+
VariantProps<typeof radioVariants> {}
53+
54+
export const RadioItem = ({
55+
children,
56+
className,
57+
size,
58+
variant,
59+
...props
60+
}: RadioProps) => (
61+
<RadioPrimitive.Item
62+
{...props}
63+
className={cn(
64+
radioVariants({
65+
size,
66+
variant,
67+
}),
68+
className
69+
)}
70+
>
71+
<RadioPrimitive.Indicator className="flex justify-center items-center">
72+
<span className={radioIndicatorVariants({ size, variant })}></span>
73+
</RadioPrimitive.Indicator>
74+
{children}
75+
</RadioPrimitive.Item>
76+
);
77+
78+
const RadioComponent = Object.assign(RadioGroupRoot, {
79+
Item: RadioItem,
80+
});
81+
82+
export { RadioComponent as RadioGroup };

‎packages/ui/Form/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from "./Input";
22
export * from "./Textarea";
33
export * from "./Checkbox";
4+
export * from "./Radio";

‎pnpm-lock.yaml

Lines changed: 89 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)