@rpcbase/ui 0.22.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {

package/src/ApplePayButton/index.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+
+export const ApplePayButton = ({ onClick, className = "" }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      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")}
+    >
+      <span className="sr-only">Pay with Apple Pay</span>
+      <svg fill="currentColor" viewBox="0 0 50 20" className="h-5 w-auto">
+        <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" />
+      </svg>
+    </button>
+  );
+};

package/src/AppleSignInButton/index.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx"
+
+export const AppleSignInButton = ({
+  onClick,
+  className = ""
+}) => {
+
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(`
+        w-full
+        bg-black text-white hover:bg-gray-800
+        flex items-center justify-center
+        px-6 py-2
+        rounded-lg
+        font-medium
+        transition duration-150 ease-in-out
+        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black
+      `, className)}
+    >
+      <svg
+        className="w-5 h-5 mr-3"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="white"
+      >
+        <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" />
+      </svg>
+      Continuer avec Apple
+    </button>
+  )
+}

package/src/index.ts

@@ -1 +1,4 @@
 export * from "./Checkbox"
+export * from "./Image"
+export * from "./ApplePayButton"
+export * from "./AppleSignInButton"