Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8a24372

Browse files
authored
feat: add shadcn checkbox component (#17248)
contributes tocoder/preview#55Add shadcn checkbox component matching Figma styles from Coder Kit:https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=489-4187&t=Zx137ETWsQZtaCku-1<img width="52" alt="Screenshot 2025-04-03 at 21 15 52"src="https://github.com/user-attachments/assets/ff2de95c-cb12-46ed-af31-a6d230e52a31"/>
1 parentae67e33 commit8a24372

File tree

6 files changed

+168
-0
lines changed

6 files changed

+168
-0
lines changed

‎site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"@mui/utils":"5.16.14",
5252
"@mui/x-tree-view":"7.25.0",
5353
"@radix-ui/react-avatar":"1.1.2",
54+
"@radix-ui/react-checkbox":"1.1.4",
5455
"@radix-ui/react-collapsible":"1.1.2",
5556
"@radix-ui/react-dialog":"1.1.4",
5657
"@radix-ui/react-dropdown-menu":"2.1.4",

‎site/pnpm-lock.yaml

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.
Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
importReactfrom"react";
3+
import{Checkbox}from"./Checkbox";
4+
5+
constmeta:Meta<typeofCheckbox>={
6+
title:"components/Checkbox",
7+
component:Checkbox,
8+
args:{},
9+
argTypes:{
10+
checked:{
11+
control:"boolean",
12+
description:"The controlled checked state of the checkbox",
13+
},
14+
defaultChecked:{
15+
control:"boolean",
16+
description:"The default checked state when initially rendered",
17+
},
18+
disabled:{
19+
control:"boolean",
20+
description:
21+
"When true, prevents the user from interacting with the checkbox",
22+
},
23+
},
24+
};
25+
26+
exportdefaultmeta;
27+
typeStory=StoryObj<typeofCheckbox>;
28+
29+
exportconstUnchecked:Story={};
30+
31+
exportconstChecked:Story={
32+
args:{
33+
defaultChecked:true,
34+
checked:true,
35+
},
36+
};
37+
38+
exportconstDisabled:Story={
39+
args:{
40+
disabled:true,
41+
},
42+
};
43+
44+
exportconstDisabledChecked:Story={
45+
args:{
46+
disabled:true,
47+
defaultChecked:true,
48+
checked:true,
49+
},
50+
};
51+
52+
exportconstCustomStyling:Story={
53+
args:{
54+
className:"h-6 w-6 rounded-full",
55+
},
56+
};
57+
58+
exportconstWithLabel:Story={
59+
render:()=>(
60+
<divclassName="flex gap-3">
61+
<Checkboxid="terms"/>
62+
<divclassName="grid">
63+
<label
64+
htmlFor="terms"
65+
className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:text-content-disabled"
66+
>
67+
Accept terms and conditions
68+
</label>
69+
<pclassName="text-sm text-content-secondary mt-1">
70+
You agree to our Terms of Service and Privacy Policy.
71+
</p>
72+
</div>
73+
</div>
74+
),
75+
};
76+
77+
exportconstIndeterminate:Story={
78+
render:()=>{
79+
const[checked,setChecked]=React.useState<boolean|"indeterminate">(
80+
"indeterminate",
81+
);
82+
return(
83+
<Checkbox
84+
checked={checked}
85+
onCheckedChange={(value)=>setChecked(value)}
86+
/>
87+
);
88+
},
89+
};
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Copied from shadc/ui on 04/03/2025
3+
*@see {@link https://ui.shadcn.com/docs/components/checkbox}
4+
*/
5+
import*asCheckboxPrimitivefrom"@radix-ui/react-checkbox";
6+
import{Check,Minus}from"lucide-react";
7+
import*asReactfrom"react";
8+
9+
import{cn}from"utils/cn";
10+
11+
exportconstCheckbox=React.forwardRef<
12+
React.ElementRef<typeofCheckboxPrimitive.Root>,
13+
React.ComponentPropsWithoutRef<typeofCheckboxPrimitive.Root>
14+
>(({ className, ...props},ref)=>(
15+
<CheckboxPrimitive.Root
16+
ref={ref}
17+
className={cn(
18+
`peer h-6 w-6 shrink-0 rounded-sm border border-border border-solid
19+
focus-visible:outline-none focus-visible:ring-2
20+
focus-visible:ring-content-link focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
21+
disabled:cursor-not-allowed disabled:bg-surface-primary disabled:data-[state=checked]:bg-surface-tertiary
22+
data-[state=unchecked]:bg-surface-primary
23+
data-[state=checked]:bg-surface-invert-primary data-[state=checked]:text-content-invert
24+
hover:border-border-hover hover:data-[state=checked]:bg-surface-invert-secondary`,
25+
className,
26+
)}
27+
{...props}
28+
>
29+
<CheckboxPrimitive.Indicator
30+
className={cn("flex items-center justify-center text-current relative")}
31+
>
32+
<divclassName="flex">
33+
{(props.checked===true||props.defaultChecked===true)&&(
34+
<CheckclassName="w-5 h-5"strokeWidth={2.5}/>
35+
)}
36+
{props.checked==="indeterminate"&&(
37+
<MinusclassName="w-5 h-5"strokeWidth={2.5}/>
38+
)}
39+
</div>
40+
</CheckboxPrimitive.Indicator>
41+
</CheckboxPrimitive.Root>
42+
));

‎site/src/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
--border-default:2406%90%;
3232
--border-success:14276%36%;
3333
--border-destructive:084%60%;
34+
--border-hover:240,5%,34%;
3435
--overlay-default:2405%84%/80%;
3536
--radius:0.5rem;
3637
--highlight-purple:26283%58%;
@@ -67,6 +68,7 @@
6768
--border-default:2404%16%;
6869
--border-success:14276%36%;
6970
--border-destructive:091%71%;
71+
--border-hover:240,5%,34%;
7072
--overlay-default:24010%4%/80%;
7173
--highlight-purple:25295%85%;
7274
--highlight-green:14179%85%;

‎site/tailwind.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ module.exports = {
5353
border:{
5454
DEFAULT:"hsl(var(--border-default))",
5555
destructive:"hsl(var(--border-destructive))",
56+
success:"hsl(var(--border-success))",
57+
hover:"hsl(var(--border-hover))",
5658
},
5759
overlay:"hsla(var(--overlay-default))",
5860
input:"hsl(var(--input))",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp