@rpcbase/ui 0.24.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/Checkbox/index.tsx +13 -3
package/package.json
CHANGED
package/src/Checkbox/index.tsx
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
const colorVariants = {
|
|
5
|
+
red: "checked:border-red-700 checked:bg-red-700 indeterminate:border-red-700 indeterminate:bg-red-700 focus-visible:outline-red-700",
|
|
6
|
+
sky: "checked:border-sky-600 checked:bg-sky-600 indeterminate:border-sky-600 indeterminate:bg-sky-600 focus-visible:outline-sky-600"
|
|
7
|
+
}
|
|
8
|
+
|
|
3
9
|
interface CheckboxProps
|
|
4
10
|
extends Partial<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">> {
|
|
5
11
|
id: string;
|
|
6
12
|
name: string;
|
|
7
13
|
checked: boolean;
|
|
8
14
|
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
9
|
-
|
|
15
|
+
color: keyof typeof colorVariants;
|
|
16
|
+
};
|
|
10
17
|
|
|
11
18
|
export const Checkbox = ({
|
|
12
19
|
id,
|
|
@@ -15,9 +22,12 @@ export const Checkbox = ({
|
|
|
15
22
|
defaultChecked,
|
|
16
23
|
checked,
|
|
17
24
|
onChange,
|
|
18
|
-
color = "
|
|
25
|
+
color = "sky",
|
|
19
26
|
...props
|
|
20
27
|
}: CheckboxProps) => {
|
|
28
|
+
|
|
29
|
+
const colorClasses = colorVariants[color];
|
|
30
|
+
|
|
21
31
|
return (
|
|
22
32
|
<div className="flex h-6 shrink-0 items-center">
|
|
23
33
|
<div className="group grid size-4 grid-cols-1">
|
|
@@ -30,7 +40,7 @@ export const Checkbox = ({
|
|
|
30
40
|
defaultChecked={defaultChecked}
|
|
31
41
|
checked={checked}
|
|
32
42
|
onChange={onChange}
|
|
33
|
-
className={`col-start-1 row-start-1 appearance-none cursor-pointer rounded-sm border border-gray-300 bg-white
|
|
43
|
+
className={`col-start-1 row-start-1 appearance-none cursor-pointer rounded-sm border border-gray-300 bg-white focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ${colorClasses}`}
|
|
34
44
|
/>
|
|
35
45
|
<svg
|
|
36
46
|
fill="none"
|