Skip to content

Commit c720765

Browse files
trinhthinh388trinhthinh388
authored
feat: added radio-group recipe (#198)
1 parent 731747c commit c720765

File tree

14 files changed

+159
-48
lines changed

14 files changed

+159
-48
lines changed

‎docs/app/docs/(components)/radio-group/apis.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { ComponentAPI } from "@/components/page";
2+
3+
export const radioGroupRootAPIs: ComponentAPI[] = [
4+
{
5+
name: "size",
6+
type: ["sm", "md", "lg"],
7+
default: "md"
8+
},
9+
{
10+
name: "disabled",
11+
type: "boolean",
12+
default: "false"
13+
},
14+
{
15+
name: "error",
16+
type: "boolean",
17+
default: "false"
18+
},
19+
{
20+
name: "value",
21+
type: "string"
22+
},
23+
{
24+
name: "onValueChange",
25+
type: "(value: string) => void"
26+
},
27+
{
28+
name: "orientation",
29+
type: ["horizontal", "vertical"],
30+
default: "horizontal"
31+
}
32+
];
33+
34+
export const radioGroupItemAPIs: ComponentAPI[] = [
35+
{
36+
name: "value",
37+
type: "string"
38+
},
39+
{
40+
name: "disabled",
41+
type: "boolean",
42+
default: "false"
43+
}
44+
];

‎docs/app/docs/(components)/radio-group/page.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Page } from "@/components/page";
44
import { RadioGroup } from "@brifui/components";
55
import { css } from "@brifui/styled/css";
66

7+
import { radioGroupItemAPIs, radioGroupRootAPIs } from "./apis";
78
import { defaultSnippet, disabledSnippet, errorSnippet } from "./snippet";
89

910
export default function InputDocs() {
@@ -197,6 +198,13 @@ export default function InputDocs() {
197198
</Page.Preview>
198199
<Page.CodePreview>{errorSnippet}</Page.CodePreview>
199200
</Page.Section>
201+
202+
<Page.Section shadow={false} title="API Reference">
203+
<Page.APIReference title="Root" apis={radioGroupRootAPIs} />
204+
<Page.APIReference title="Item" apis={radioGroupItemAPIs} />
205+
<Page.APIReference title="Indicator" />
206+
<Page.APIReference title="Label" tag="label" />
207+
</Page.Section>
200208
</Page>
201209
);
202210
}

‎docs/app/docs/(components)/scrollarea/apis.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { ComponentAPI } from "@/components/page";
2+
3+
export const radioGroupRootAPIs: ComponentAPI[] = [
4+
{
5+
name: "size",
6+
type: ["sm", "md", "lg"],
7+
default: "md"
8+
},
9+
{
10+
name: "disabled",
11+
type: "boolean",
12+
default: "false"
13+
},
14+
{
15+
name: "error",
16+
type: "boolean",
17+
default: "false"
18+
},
19+
{
20+
name: "value",
21+
type: "string"
22+
},
23+
{
24+
name: "onValueChange",
25+
type: "(value: string) => void"
26+
},
27+
{
28+
name: "orientation",
29+
type: ["horizontal", "vertical"],
30+
default: "horizontal"
31+
}
32+
];
33+
34+
export const radioGroupItemAPIs: ComponentAPI[] = [
35+
{
36+
name: "value",
37+
type: "string"
38+
},
39+
{
40+
name: "disabled",
41+
type: "boolean",
42+
default: "false"
43+
}
44+
];

‎docs/app/docs/(components)/scrollarea/page.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function ScrollAreaDocs() {
3333
>
3434
Tags
3535
</Text>
36-
{tags.map((tag, idx) => (
36+
{tags.map((tag) => (
3737
<Text
3838
suppressHydrationWarning
3939
key={tag}
@@ -55,6 +55,11 @@ export default function ScrollAreaDocs() {
5555
</Page.Preview>
5656
<Page.CodePreview>{defaultSnippet}</Page.CodePreview>
5757
</Page.Section>
58+
59+
<Page.Section shadow={false} title="API Reference">
60+
<Page.APIReference title="Root" />
61+
<Page.APIReference title="Scrollbar" />
62+
</Page.Section>
5863
</Page>
5964
);
6065
}

‎docs/components/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ const APIReference: React.FC<{
223223
<div
224224
className={css(
225225
css.raw({
226-
mb: 4
226+
mb: 6
227227
}),
228228
_css
229229
)}

‎packages/components/radio/src/context.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
"use client";
22

33
import React, { createContext, useContext } from "react";
4+
import { RadioGroupVariantProps } from "@brifui/styled/recipes";
45

5-
import { RadioVariantProps } from "./variants";
6-
7-
export type RadioGroupContextType = NonNullable<RadioVariantProps>;
6+
export type RadioGroupContextType = NonNullable<RadioGroupVariantProps>;
87

98
const RadioGroupContext = createContext<RadioGroupContextType>({});
109

1110
export const RadioGroupProvider: React.FC<
12-
React.PropsWithChildren<NonNullable<RadioVariantProps>>
11+
React.PropsWithChildren<NonNullable<RadioGroupVariantProps>>
1312
> = ({ children, ...props }) => {
1413
return (
1514
<RadioGroupContext.Provider value={props}>

‎packages/components/radio/src/radio.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React from "react";
22
import { CircleIcon } from "lucide-react";
33
import { RadioGroup as BaseRadioGroup } from "radix-ui";
44
import { css as _css, cx } from "@brifui/styled/css";
5+
import { radioGroup, RadioGroupVariantProps } from "@brifui/styled/recipes";
56
import { findChildrenByType, WithCssProps } from "@brifui/utils";
67

78
import { RadioGroupProvider, useRadioGroup } from "./context";
8-
import { RadioVariantProps, radioVariants } from "./variants";
99

1010
export type RadioLabelProps = WithCssProps<
1111
React.ComponentPropsWithRef<"label">
@@ -17,10 +17,10 @@ const Label: React.FC<RadioLabelProps> = ({
1717
...props
1818
}) => {
1919
const { size, error } = useRadioGroup();
20-
const raw = radioVariants.raw({ size, error });
20+
const classes = radioGroup({ size, error });
2121

2222
return (
23-
<label className={cx(_css(raw.label, css), className)} {...props}>
23+
<label className={cx(classes.label, _css(css), className)} {...props}>
2424
{children}
2525
</label>
2626
);
@@ -35,12 +35,12 @@ const Indicator: React.FC<RadioIndicatorProps> = ({
3535
...props
3636
}) => {
3737
const { size, error } = useRadioGroup();
38-
const raw = radioVariants.raw({ size, error });
38+
const classes = radioGroup({ size, error });
3939

4040
return (
4141
<BaseRadioGroup.Indicator
42-
aria-invalid={error}
43-
className={cx(_css(raw.indicator, css), className)}
42+
aria-invalid={!!error}
43+
className={cx(classes.indicator, _css(css), className)}
4444
{...props}
4545
>
4646
<CircleIcon />
@@ -57,14 +57,14 @@ const Item: React.FC<RadioItemProps> = ({
5757
...props
5858
}) => {
5959
const { size, error } = useRadioGroup();
60-
const raw = radioVariants.raw({ size, error });
60+
const classes = radioGroup({ size, error });
6161
const [indicators, labels] = findChildrenByType(children, Indicator, Label);
6262

6363
return (
64-
<div className={cx(_css(raw.itemContainer, css), className)}>
64+
<div className={cx(classes.itemContainer, _css(css), className)}>
6565
<BaseRadioGroup.Item
66-
aria-invalid={error}
67-
className={cx(_css(raw.item, css))}
66+
aria-invalid={!!error}
67+
className={classes.item}
6868
{...props}
6969
>
7070
{indicators}
@@ -75,7 +75,7 @@ const Item: React.FC<RadioItemProps> = ({
7575
};
7676

7777
export type RadioProps = WithCssProps<
78-
RadioVariantProps & BaseRadioGroup.RadioGroupProps
78+
RadioGroupVariantProps & BaseRadioGroup.RadioGroupProps
7979
>;
8080
const Root: React.FC<RadioProps> = ({
8181
css,
@@ -85,13 +85,13 @@ const Root: React.FC<RadioProps> = ({
8585
error,
8686
...props
8787
}) => {
88-
const raw = radioVariants.raw({ error, size });
88+
const classes = radioGroup({ error, size });
8989
const [items] = findChildrenByType(children, Item);
9090

9191
return (
9292
<RadioGroupProvider size={size} error={error}>
9393
<BaseRadioGroup.Root
94-
className={cx(_css(raw.root, css), className)}
94+
className={cx(classes.root, _css(css), className)}
9595
{...props}
9696
>
9797
{items}

‎packages/components/scrollarea/src/context.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
"use client";
22

33
import React, { createContext, useContext } from "react";
4+
import { ScrollareaVariantProps } from "@brifui/styled/recipes";
45

5-
import { ScrollAreaVariantProps } from "./variants";
6-
7-
export type ScrollAreaContextType = NonNullable<ScrollAreaVariantProps>;
6+
export type ScrollAreaContextType = NonNullable<ScrollareaVariantProps>;
87

98
const ScrollAreaContext = createContext<ScrollAreaContextType>({});
109

‎packages/components/scrollarea/src/scrollarea.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from "react";
22
import { ScrollArea as BaseScrollArea } from "radix-ui";
33
import { css as _css, cx } from "@brifui/styled/css";
4+
import { scrollarea, ScrollareaVariantProps } from "@brifui/styled/recipes";
45
import { WithCssProps } from "@brifui/utils";
56

67
import { ScrollAreaProvider } from "./context";
7-
import { ScrollAreaVariantProps, scrollAreaVariants } from "./variants";
88

99
export type ScrollAreaScrollbarProps =
1010
WithCssProps<BaseScrollArea.ScrollAreaScrollbarProps>;
@@ -14,35 +14,35 @@ const Scrollbar: React.FC<ScrollAreaScrollbarProps> = ({
1414
children,
1515
...props
1616
}) => {
17-
const raw = scrollAreaVariants.raw({ orientation: props.orientation });
17+
const classes = scrollarea({ orientation: props.orientation });
1818

1919
return (
2020
<BaseScrollArea.Scrollbar
21-
className={cx(_css(raw.scrollbar, css), className)}
21+
className={cx(classes.scrollbar, _css(css), className)}
2222
{...props}
2323
>
2424
{children}
25-
<BaseScrollArea.Thumb className={_css(raw.thumb)} />
25+
<BaseScrollArea.Thumb className={classes.thumb} />
2626
</BaseScrollArea.Scrollbar>
2727
);
2828
};
2929

3030
export type ScrollAreaProps = WithCssProps<
31-
ScrollAreaVariantProps & BaseScrollArea.ScrollAreaProps
31+
ScrollareaVariantProps & BaseScrollArea.ScrollAreaProps
3232
>;
3333
const Root: React.FC<ScrollAreaProps> = ({
3434
className,
3535
css,
3636
children,
3737
...props
3838
}) => {
39-
const raw = scrollAreaVariants.raw();
39+
const classes = scrollarea();
4040

4141
return (
4242
<ScrollAreaProvider>
43-
<BaseScrollArea.Root className={_css(raw.root)} {...props}>
43+
<BaseScrollArea.Root className={classes.root} {...props}>
4444
<BaseScrollArea.Viewport
45-
className={cx(_css(raw.viewport, css), className)}
45+
className={cx(classes.viewport, _css(css), className)}
4646
>
4747
{children}
4848
</BaseScrollArea.Viewport>

‎packages/theme/src/presets/index.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import {
1010
codeblockSlotRecipe,
1111
dialogSlotRecipe,
1212
formSlotRecipe,
13-
inputSlotRecipe
13+
inputSlotRecipe,
14+
radioGroupSlotRecipe,
15+
scrollareaSlotRecipe
1416
} from "../recipes";
1517
import {
1618
baseSemanticTokens,
@@ -31,7 +33,9 @@ const slotRecipes = {
3133
codeblock: codeblockSlotRecipe,
3234
dialog: dialogSlotRecipe,
3335
form: formSlotRecipe,
34-
input: inputSlotRecipe
36+
input: inputSlotRecipe,
37+
radioGroup: radioGroupSlotRecipe,
38+
scrollarea: scrollareaSlotRecipe
3539
} satisfies Record<string, SlotRecipeConfig>;
3640

3741
export const preset = definePreset({

0 commit comments

Comments
 (0)