@indietabletop/appkit 3.2.0-11 → 3.2.0-12

package/lib/DialogTrigger/index.tsx

@@ -0,0 +1,36 @@
+import {
+  DialogProvider,
+  useDialogContext,
+  useStoreState,
+} from "@ariakit/react";
+import type { ReactElement, ReactNode } from "react";
+
+function DialogGuard(props: { children: ReactNode }) {
+  const dialog = useDialogContext();
+  const isMounted = useStoreState(dialog, (store) => store?.mounted);
+  if (!isMounted) {
+    return null;
+  }
+  return props.children;
+}
+
+/**
+ * Wraps AriaKit's DialogProvider, but take a tuple of Dialog a DialogDisclosure
+ * elements as children, and makes sense that the Dialog component is not
+ * rendered when it is hidden.
+ *
+ * This is important in cases where the dialog contains a form that should only
+ * be initialized and re-initialized when the dialog opens, not when it is first
+ * rendered.
+ */
+export function DialogTrigger(props: {
+  children: [ReactElement, ReactElement];
+}) {
+  const [dialog, button] = props.children;
+  return (
+    <DialogProvider>
+      <DialogGuard>{dialog}</DialogGuard>
+      {button}
+    </DialogProvider>
+  );
+}

package/lib/Letterhead/style.css.ts

@@ -2,7 +2,7 @@ import { createTheme, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { textVariants } from "../atomic.css.ts";
 import { manofa, minion } from "../common.css.ts";
-import { Hover } from "../media.ts";
+import { Hover, MinWidth } from "../media.ts";
 
 const align = {
   start: textVariants({ textAlign: "start" }),
@@ -11,7 +11,7 @@ const align = {
 };
 
 export const [letterheadTheme, { padding, footerMargin }] = createTheme({
-  padding: "clamp(1rem, 8vw, 4rem)",
+  padding: "1.25rem",
   footerMargin: "3rem",
 });
 
@@ -25,6 +25,14 @@ export const letterhead = recipe({
       borderRadius: "1rem",
       marginInline: "auto",
       maxInlineSize: "36rem",
+
+      "@media": {
+        [MinWidth.SMALL]: {
+          vars: {
+            [padding]: `clamp(1.5rem, 8%, 4rem)`,
+          },
+        },
+      },
     },
   ],
 

package/lib/index.ts

@@ -1,4 +1,5 @@
 // Components
+export * from "./DialogTrigger/index.tsx";
 export * from "./ExternalLink.tsx";
 export * from "./FormSubmitButton.tsx";
 export * from "./FullscreenDismissBlocker.tsx";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "3.2.0-11",
+  "version": "3.2.0-12",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",