@indietabletop/appkit 3.2.0-13 → 3.2.0-15

package/lib/ModalDialog/index.tsx

@@ -1,21 +1,24 @@
 import { Dialog, type DialogProps } from "@ariakit/react";
+import type { RecipeVariants } from "@vanilla-extract/recipes";
 import type { ReactNode } from "react";
 import { cx } from "../class-names.ts";
 import * as css from "./style.css.ts";
 
+type Size = NonNullable<NonNullable<RecipeVariants<typeof css.dialog>>["size"]>;
+
 export type ModalDialogProps = Omit<DialogProps, "modal" | "backdrop"> & {
   children: ReactNode;
-  variant: "form" | "confirm";
+  size: Size;
   backdropClassName?: string;
 };
 
 export function ModalDialog(props: ModalDialogProps) {
-  const { variant, backdropClassName, className, ...dialogProps } = props;
+  const { size, backdropClassName, className, ...dialogProps } = props;
 
   return (
     <Dialog
       {...dialogProps}
-      {...cx(className, css.dialog({ variant }))}
+      {...cx(className, css.dialog({ size }))}
       backdrop={<div {...cx(css.backdrop, backdropClassName)} />}
       modal
     >

package/lib/ModalDialog/style.css.ts

@@ -1,8 +1,8 @@
-import { style, type ComplexStyleRule } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { MinWidth } from "../media.ts";
 
-const scaleTransition: ComplexStyleRule = {
+const scaleTransition = {
   transition: "transform 200ms, opacity 200ms",
   transform: "scale(1.1)",
 
@@ -19,7 +19,7 @@ const scaleTransition: ComplexStyleRule = {
   },
 };
 
-const translateTransition: ComplexStyleRule = {
+const translateTransition = {
   transition: "transform 200ms, opacity 200ms",
   transform: "translateY(5rem)",
 
@@ -48,8 +48,8 @@ export const dialog = recipe({
   },
 
   variants: {
-    variant: {
-      form: {
+    size: {
+      large: {
         ...translateTransition,
         inlineSize: "100%",
         blockSize: "100%",
@@ -65,7 +65,7 @@ export const dialog = recipe({
         },
       },
 
-      confirm: {
+      small: {
         ...scaleTransition,
         inlineSize: "min(24rem, 90svw)",
         blockSize: "fit-content",

package/lib/globals.css.ts

@@ -8,6 +8,7 @@ globalStyle(":root", {
   textRendering: "optimizeLegibility",
   WebkitFontSmoothing: "antialiased",
   MozOsxFontSmoothing: "grayscale",
+  WebkitTapHighlightColor: "transparent",
 });
 
 globalStyle("*", {

package/package.json

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