@rpcbase/ui 0.23.0 → 0.25.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/ApplePayButton/index.tsx +16 -0
- package/src/AppleSignInButton/index.tsx +33 -0
- package/src/Checkbox/index.tsx +13 -3
- package/src/index.ts +2 -0
package/package.json
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
|
|
3
|
+
export const ApplePayButton = ({ onClick, className = "" }) => {
|
|
4
|
+
return (
|
|
5
|
+
<button
|
|
6
|
+
type="button"
|
|
7
|
+
onClick={onClick}
|
|
8
|
+
className={clsx("flex w-full items-center justify-center rounded-md border border-transparent bg-black py-2 text-white hover:bg-gray-800 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:outline-hidden")}
|
|
9
|
+
>
|
|
10
|
+
<span className="sr-only">Pay with Apple Pay</span>
|
|
11
|
+
<svg fill="currentColor" viewBox="0 0 50 20" className="h-5 w-auto">
|
|
12
|
+
<path d="M9.536 2.579c-.571.675-1.485 1.208-2.4 1.132-.113-.914.334-1.884.858-2.484C8.565.533 9.564.038 10.374 0c.095.951-.276 1.884-.838 2.579zm.829 1.313c-1.324-.077-2.457.751-3.085.751-.638 0-1.6-.713-2.647-.694-1.362.019-2.628.79-3.323 2.017-1.429 2.455-.372 6.09 1.009 8.087.676.99 1.485 2.075 2.552 2.036 1.009-.038 1.409-.656 2.628-.656 1.228 0 1.58.656 2.647.637 1.104-.019 1.8-.99 2.475-1.979.771-1.122 1.086-2.217 1.105-2.274-.02-.019-2.133-.828-2.152-3.263-.02-2.036 1.666-3.007 1.742-3.064-.952-1.408-2.437-1.56-2.951-1.598zm7.645-2.76v14.834h2.305v-5.072h3.19c2.913 0 4.96-1.998 4.96-4.89 0-2.893-2.01-4.872-4.885-4.872h-5.57zm2.305 1.941h2.656c2 0 3.142 1.066 3.142 2.94 0 1.875-1.142 2.95-3.151 2.95h-2.647v-5.89zM32.673 16.08c1.448 0 2.79-.733 3.4-1.893h.047v1.779h2.133V8.582c0-2.14-1.714-3.52-4.351-3.52-2.447 0-4.256 1.399-4.323 3.32h2.076c.171-.913 1.018-1.512 2.18-1.512 1.41 0 2.2.656 2.2 1.865v.818l-2.876.171c-2.675.162-4.123 1.256-4.123 3.159 0 1.922 1.495 3.197 3.637 3.197zm.62-1.76c-1.229 0-2.01-.59-2.01-1.494 0-.933.752-1.475 2.19-1.56l2.562-.162v.837c0 1.39-1.181 2.379-2.743 2.379zM41.1 20c2.247 0 3.304-.856 4.227-3.454l4.047-11.341h-2.342l-2.714 8.763h-.047l-2.714-8.763h-2.409l3.904 10.799-.21.656c-.352 1.114-.923 1.542-1.942 1.542-.18 0-.533-.02-.676-.038v1.779c.133.038.705.057.876.057z" />
|
|
13
|
+
</svg>
|
|
14
|
+
</button>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import clsx from "clsx"
|
|
2
|
+
|
|
3
|
+
export const AppleSignInButton = ({
|
|
4
|
+
onClick,
|
|
5
|
+
className = ""
|
|
6
|
+
}) => {
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<button
|
|
10
|
+
onClick={onClick}
|
|
11
|
+
className={clsx(`
|
|
12
|
+
w-full
|
|
13
|
+
bg-black text-white hover:bg-gray-800
|
|
14
|
+
flex items-center justify-center
|
|
15
|
+
px-6 py-2
|
|
16
|
+
rounded-lg
|
|
17
|
+
font-medium
|
|
18
|
+
transition duration-150 ease-in-out
|
|
19
|
+
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black
|
|
20
|
+
`, className)}
|
|
21
|
+
>
|
|
22
|
+
<svg
|
|
23
|
+
className="w-5 h-5 mr-3"
|
|
24
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
25
|
+
viewBox="0 0 24 24"
|
|
26
|
+
fill="white"
|
|
27
|
+
>
|
|
28
|
+
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.539 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
|
|
29
|
+
</svg>
|
|
30
|
+
Continuer avec Apple
|
|
31
|
+
</button>
|
|
32
|
+
)
|
|
33
|
+
}
|
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"
|
package/src/index.ts
CHANGED