Add modals from Tobira

package.json

@@ -24,7 +24,7 @@
     "typescript": "^5.1.3"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@floating-ui/react": "^0.24.3",
     "focus-trap-react": "^10.2.3",
     "react": "^18.2.0",

src/config.tsx

@@ -28,11 +28,20 @@ export type ColorConfig = {
   neutral90: string,
 
   danger0: string,
+  danger0BwInverted: string;
   danger1: string,
+  danger1BwInverted: string;
   danger2: string,
   danger4: string,
   danger5: string,
 
+  happy0: string;
+  happy0BwInverted: string;
+  happy1: string;
+  happy1BwInverted: string;
+  happy2: string;
+  happy2BwInverted: string;
+
   accent8: string;
   accent7: string;
   accent6: string;
@@ -59,11 +68,20 @@ export const DEFAULT_CONFIG: AppkitConfig = {
     neutral90: "var(--color-neutral90)",
 
     danger0: "var(--color-danger0)",
+    danger0BwInverted: "var(--color-danger0-bw-inverted)",
     danger1: "var(--color-danger1)",
+    danger1BwInverted: "var(--color-danger1-bw-inverted)",
     danger2: "var(--color-danger2)",
     danger4: "var(--color-danger4)",
     danger5: "var(--color-danger5)",
 
+    happy0: "var(--color-happy0)",
+    happy0BwInverted: "var(--color-happy0-bw-inverted)",
+    happy1: "var(--color-happy1)",
+    happy1BwInverted: "var(--color-happy1-bw-inverted)",
+    happy2: "var(--color-happy2)",
+    happy2BwInverted: "var(--color-happy2-bw-inverted)",
+
     accent8: "var(--color-accent8)",
     accent7: "var(--color-accent7)",
     accent6: "var(--color-accent6)",

src/index.tsx

@@ -8,7 +8,9 @@ export * from "./floating";
 export * from "./header";
 export * from "./spinner";
 export * from "./util";
+export * from "./utilFunc";
 export * from "./modal";
+export * from "./styledButton";
 
 
 /**

src/styledButton.tsx

@@ -0,0 +1,82 @@
+import { Interpolation, Theme } from "@emotion/react";
+import React from "react";
+import { focusStyle, match, useAppkitConfig } from ".";
+
+export type Kind = "normal" | "danger" | "happy";
+
+type ButtonProps = JSX.IntrinsicElements["button"] & {
+    kind?: Kind;
+    extraCss?: Interpolation<Theme>;
+};
+
+/** A styled button */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ kind = "normal", extraCss, children, ...rest }, ref) => (
+    <button ref={ref} type="button" css={css(kind, extraCss)} {...rest}>{children}</button>
+  ),
+);
+
+const css = (kind: Kind, extraCss: Interpolation<Theme> = {}): Interpolation<Theme> => {
+  const config = useAppkitConfig();
+
+  const notDisabledStyle = match(kind, {
+    "normal": () => ({
+      border: `1px solid ${config.colors.neutral40}`,
+      color: config.colors.neutral90,
+      "&:hover, &:focus-visible": {
+        border: `1px solid ${config.colors.neutral60}`,
+        backgroundColor: config.colors.neutral15,
+      },
+      ...focusStyle(config, { offset: -1 }),
+    }),
+
+    "danger": () => ({
+      border: `1px solid ${config.colors.danger0}`,
+      color: config.colors.danger0,
+      "&:hover, &:focus-visible": {
+        border: `1px solid ${config.colors.danger1}`,
+        backgroundColor: config.colors.danger0,
+        color: config.colors.danger0BwInverted,
+      },
+      ...focusStyle(config, { offset: 1 }),
+    }),
+
+    "happy": () => ({
+      border: `1px solid ${config.colors.happy1}`,
+      color: config.colors.happy0BwInverted,
+      backgroundColor: config.colors.happy0,
+      "&:hover, &:focus-visible": {
+        border: `1px solid ${config.colors.happy2}`,
+        backgroundColor: config.colors.happy1,
+        color: config.colors.happy1BwInverted,
+      },
+      ...focusStyle(config, { offset: 1 }),
+    }),
+  });
+
+  return {
+    borderRadius: 8,
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "7px 14px",
+    gap: 12,
+    whiteSpace: "nowrap",
+    backgroundColor: config.colors.neutral10,
+    transition: "background-color 0.15s, border-color 0.15s",
+    textDecoration: "none",
+    "& > svg": {
+      fontSize: 20,
+    },
+    "&:disabled": {
+      border: `1px solid ${config.colors.neutral25}`,
+      color: config.colors.neutral40,
+    },
+    "&:not([disabled])": {
+      cursor: "pointer",
+      ...notDisabledStyle,
+    },
+    ...extraCss as Record<string, unknown>,
+  };
+};
+
+export const buttonStyle = css;

src/utilFunc.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { bug } from ".";
+
+/**
+ * Accesses the current value of a ref, signaling an error when it is unbound.
+ * Note: **Don't** use this if you expect the ref to be unbound temporarily.
+ * This is mainly for accessing refs in event handlers for elements
+ * that are guaranteed to be alive as long as the ref itself.
+ */
+export const currentRef = <T>(ref: React.RefObject<T>): T => (
+  ref.current ?? bug("ref unexpectedly unbound")
+);