Skip to content

Commit e68f261

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
Merge branch 'main' into eslint-flat-config
2 parents 119346b + acbe00e commit e68f261

File tree

54 files changed

+612
-171
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+612
-171
lines changed

‎docs/app/docs/components/badge/page.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,34 @@ export const metadata = SEO.getMetadata(PAGE_NAME)
88

99
import codeUsage from "./docs/codeUsage"
1010

11-
const AvatarDocs = () => {
11+
const BadgeDocs = () => {
12+
const columns = [
13+
{name: 'Prop', id: 'prop'},
14+
{name: 'Type', id: 'type'},
15+
{name: 'Default', id: 'default'},
16+
{name: 'Description', id: 'description'},
17+
];
18+
19+
const data = [
20+
{prop: 'color', type: 'string', default: 'null', description: 'Accent color of the component', id: 'color'},
21+
];
1222
return <div>
1323
<Documentation currentPage={PAGE_NAME} title='Badge' description={`
1424
Badges are used to display a small amount of information. They are used in the sidebar, and in the chat.
1525
`}>
1626
<Documentation.ComponentHero codeUsage={codeUsage}>
1727
<div style={{ display: "flex", gap: 20 }}>
18-
<Badge src="https://i.pravatar.cc/1000" fallback="GG" >Badge</Badge>
28+
<Badge>Badge</Badge>
1929
</div>
2030
</Documentation.ComponentHero>
2131

32+
33+
<div className="max-w-screen-md">
34+
<Documentation.Table columns={columns} data={data} />
35+
</div>
36+
2237
</Documentation>
2338
</div>
2439
}
2540

26-
export default AvatarDocs;
41+
export default BadgeDocs;

‎docs/app/docs/components/blockquote/page.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@ import codeUsage from "./docs/codeUsage"
1111

1212

1313
const BlockQuoteDocs = () => {
14+
const columns = [
15+
{name: 'Prop', id: 'prop'},
16+
{name: 'Type', id: 'type'},
17+
{name: 'Default', id: 'default'},
18+
{name: 'Description', id: 'description'},
19+
];
20+
21+
const data = [
22+
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the quote', id: 'color'},
23+
];
1424
return <div>
1525
<Documentation currentPage={PAGE_NAME} title='BlockQuote' description={`
1626
BlockQuote is used to display a quote.
@@ -33,7 +43,12 @@ const BlockQuoteDocs = () => {
3343

3444
</div>
3545
</Documentation.ComponentHero>
36-
46+
47+
48+
<div className="max-w-screen-md">
49+
<Documentation.Table columns={columns} data={data} />
50+
</div>
51+
3752
</Documentation>
3853
</div>
3954
}

‎docs/app/docs/components/code/page.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@ const PAGE_NAME = 'CODE_DOCS';
77
export const metadata = SEO.getMetadata(PAGE_NAME);
88

99
const CodeDocs = () => {
10+
const columns = [
11+
{name: 'Prop', id: 'prop'},
12+
{name: 'Type', id: 'type'},
13+
{name: 'Default', id: 'default'},
14+
{name: 'Description', id: 'description'},
15+
];
16+
17+
const data = [
18+
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the code', id: 'color'},
19+
];
20+
1021
return <div>
1122
<Documentation
1223
currentPage={PAGE_NAME} title='Code' description={`
@@ -19,6 +30,10 @@ const CodeDocs = () => {
1930
</Documentation.ComponentHero>
2031

2132
</Documentation>
33+
34+
<div className="max-w-screen-md">
35+
<Documentation.Table columns={columns} data={data} />
36+
</div>
2237
</div>;
2338
};
2439

‎docs/app/docs/components/progress/page.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,18 @@ export const metadata = SEO.getMetadata(PAGE_NAME)
99

1010
import codeUsage from "./docs/codeUsage"
1111

12-
const AvatarDocs = () => {
12+
const ProgressDocs = () => {
13+
const columns = [
14+
{name: 'Prop', id: 'prop'},
15+
{name: 'Type', id: 'type'},
16+
{name: 'Default', id: 'default'},
17+
{name: 'Description', id: 'description'},
18+
];
19+
20+
const data = [
21+
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the progress bar', id: 'color'},
22+
];
23+
1324
return <div>
1425
<Documentation currentPage={PAGE_NAME} title='Progress' description={`
1526
Progress component is used to show the progress of a task. It can be used to show the progress of a file upload, a download, a form submission, or any other task that requires progress to be shown.
@@ -22,8 +33,12 @@ const AvatarDocs = () => {
2233
</Card>
2334
</Documentation.ComponentHero>
2435

36+
<div className="max-w-screen-md">
37+
<Documentation.Table columns={columns} data={data} />
38+
</div>
39+
2540
</Documentation>
2641
</div>
2742
}
2843

29-
export default AvatarDocs;
44+
export default ProgressDocs;

‎docs/app/docs/components/separator/page.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,19 @@ export const metadata = SEO.getMetadata(PAGE_NAME)
99

1010
import codeUsage from "./docs/codeUsage"
1111

12-
const AvatarDocs = () => {
12+
const SeparatorDocs = () => {
13+
const columns = [
14+
{name: 'Prop', id: 'prop'},
15+
{name: 'Type', id: 'type'},
16+
{name: 'Default', id: 'default'},
17+
{name: 'Description', id: 'description'},
18+
];
19+
20+
const data = [
21+
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the separator', id: 'color'},
22+
{prop: 'orientation', type: 'horizontal | vertical', default: 'horizontal', description: 'orientation of the separator', id: 'orientation'},
23+
];
24+
1325
return <div>
1426
<Documentation currentPage={PAGE_NAME} title='Separator' description={`
1527
Separator is used to separate content.
@@ -29,9 +41,11 @@ const AvatarDocs = () => {
2941
</div>
3042
</div>
3143
</Documentation.ComponentHero>
32-
44+
<div className="max-w-screen-md">
45+
<Documentation.Table columns={columns} data={data} />
46+
</div>
3347
</Documentation>
3448
</div>
3549
}
3650

37-
export default AvatarDocs;
51+
export default SeparatorDocs;

‎docs/app/docs/components/switch/docs/codeUsage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const code = {
22
javascript: {
33
code: `
4-
import Switch from "@radui/ui/Switch"
4+
import Switch from "@radui/ui/Switch";
55
66
const SwitchExample = () => (
77
<div>

‎docs/app/docs/components/switch/page.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@ export const metadata = SEO.getMetadata(PAGE_NAME)
99
import codeUsage from "./docs/codeUsage"
1010

1111
const SwitchDocs = () => {
12+
const columns = [
13+
{name: 'Prop', id: 'prop'},
14+
{name: 'Type', id: 'type'},
15+
{name: 'Default', id: 'default'},
16+
{name: 'Description', id: 'description'},
17+
];
18+
19+
const data = [
20+
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the switch', id: 'color'},
21+
];
1222
return <div>
1323
<Documentation currentPage={PAGE_NAME} title='Switch' description={`
1424
Switch is used to toggle between two states on and off. You can commonly used in settings panel, forms and any other
@@ -17,6 +27,9 @@ const SwitchDocs = () => {
1727
<Documentation.ComponentHero codeUsage={codeUsage}>
1828
<Switch>On</Switch>
1929
</Documentation.ComponentHero>
30+
<div className="max-w-screen-md">
31+
<Documentation.Table columns={columns} data={data} />
32+
</div>
2033
{/* <Documentation.UnderConstruction/> */}
2134
</Documentation>
2235
</div>

‎docs/app/docs/components/toggle-group/page.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,19 @@ import ToggleGroupWrapper from "./ToggleGroupWrapper"
77

88
import codeUsage from "./docs/codeUsage"
99

10-
const AvatarDocs = () => {
10+
const ToggleGroupDocs = () => {
11+
const columns = [
12+
{name: 'Prop', id: 'prop'},
13+
{name: 'Type', id: 'type'},
14+
{name: 'Default', id: 'default'},
15+
{name: 'Description', id: 'description'},
16+
];
17+
18+
const data = [
19+
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'},
20+
// {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'},
21+
// {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'},
22+
];
1123
return <div>
1224
<Documentation currentPage={PAGE_NAME} title='ToggleGroup' description={`
1325
ToggleGroup is a component that allows you to group multiple toggles together. Useful for when you want to allow users to select multiple options. For example, a user can select multiple filters for a search.
@@ -17,9 +29,12 @@ const AvatarDocs = () => {
1729
<ToggleGroupWrapper/>
1830
</div>
1931
</Documentation.ComponentHero>
20-
32+
33+
<div>
34+
<Documentation.Table columns={columns} data={data} />
35+
</div>
2136
</Documentation>
2237
</div>
2338
}
2439

25-
export default AvatarDocs;
40+
export default ToggleGroupDocs;

‎docs/app/docs/components/toggle/page.js‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
const PAGE_NAME = 'TOGGLE_DOCS'
22
import Documentation from "@/components/layout/Documentation/Documentation"
33

4-
5-
6-
import Card from "@radui/ui/Card"
7-
84
import ToggleWrapper from "./ToggleWrapper"
95

106

@@ -13,17 +9,31 @@ export const metadata = SEO.getMetadata(PAGE_NAME)
139

1410
import codeUsage from "./docs/codeUsage"
1511

16-
const AvatarDocs = () => {
12+
const ToggleDocs = () => {
13+
const columns = [
14+
{name: 'Prop', id: 'prop'},
15+
{name: 'Type', id: 'type'},
16+
{name: 'Default', id: 'default'},
17+
{name: 'Description', id: 'description'},
18+
];
19+
20+
const data = [
21+
{prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the toggled item', id: 'color'},
22+
// {prop: 'pressed', type: 'boolean', default: 'false', description: 'Accent Color of the toggled item', id: 'pressed'},
23+
// {prop: 'disabled', type: 'boolean', default: 'null', description: 'Accent Color of the toggled item', id: 'disabled'},
24+
];
1725
return <div>
1826
<Documentation currentPage={PAGE_NAME} title='Toggle' description={`
1927
Toggles are used to switch between two states. They are commonly used in settings, forms, and more.
2028
`}>
2129
<Documentation.ComponentHero codeUsage={codeUsage}>
2230
<ToggleWrapper/>
2331
</Documentation.ComponentHero>
24-
32+
<div className="max-w-screen-md">
33+
<Documentation.Table columns={columns} data={data} />
34+
</div>
2535
</Documentation>
2636
</div>
2737
}
2838

29-
export default AvatarDocs;
39+
export default ToggleDocs;

‎docs/app/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const InfoIcon = () => {
88

99
const Layout = ({ children }: any) => {
1010
return (
11-
<div data-accent-color="blue" className="flex space-x-2 w-full h-[94vh] overflow-hidden">
11+
<div data-accent-color="blue" className="flex space-x-2 w-full max-h-screen overflow-y-auto">
1212
<div className='flex-none h-full flex flex-col'>
1313
<Navigation />
1414
</div>

0 commit comments

Comments
 (0)