@indietabletop/appkit 5.0.0-2 → 5.0.0-4

package/lib/QRCode/QRCode.tsx

@@ -4,12 +4,17 @@ import { cx } from "../class-names.ts";
 import { LoadingIndicator } from "../LoadingIndicator.js";
 import { code } from "./style.css.ts";
 
-export function QRCode(props: { url: AsyncOp<string, unknown> }) {
+type QRCodeProps = {
+  url: AsyncOp<string, unknown>;
+  className?: string;
+};
+
+export function QRCode(props: QRCodeProps) {
   const { url: result } = props;
   const { client } = useAppConfig();
 
   return (
-    <div {...cx(code.container)}>
+    <div {...cx(props, code.container)}>
       {result.unpack(
         (url) => {
           const params = new URLSearchParams({ url });

package/lib/QRCode/style.css.ts

@@ -2,13 +2,17 @@ import { style } from "@vanilla-extract/css";
 
 export const code = {
   container: style({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "white",
-    borderRadius: "0.5rem",
-    maxInlineSize: "12rem",
-    aspectRatio: "1",
+    "@layer": {
+      appkit: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "white",
+        borderRadius: "0.5rem",
+        maxInlineSize: "12rem",
+        aspectRatio: "1",
+      },
+    },
   }),
 
   image: style({

package/lib/ShareButton/ShareButton.stories.tsx

@@ -0,0 +1,58 @@
+import preview from "../../.storybook/preview.tsx";
+import { ShareButton } from "./ShareButton.tsx";
+import { test } from "./test.css.ts";
+
+const meta = preview.meta({
+  title: "Components/Share Button",
+  component: ShareButton,
+  tags: ["autodocs"],
+  args: {
+    shareLabel: "Share data",
+    copyLabel: "Copy to clipboard",
+    shareData: { url: "https://example.com", title: "Example URL" },
+  },
+});
+
+/**
+ * The default case.
+ */
+export const Default = meta.story({
+  args: {},
+});
+
+/**
+ * Enforce use of copy to clipboard.
+ */
+export const WebShareDisabled = meta.story({
+  args: {
+    webShare: false,
+  },
+});
+
+/**
+ * Allows overriding revert after milliseconds timer.
+ */
+export const RevertAfterOverride = meta.story({
+  args: {
+    revertAfterMs: 5000,
+  },
+});
+
+/**
+ * Manually supplying disabled overrides internal button state.
+ */
+export const Disabled = meta.story({
+  args: {
+    disabled: true,
+  },
+});
+
+/**
+ * Passes along arbitrary props to the underlying button component.
+ */
+export const PassesProps = meta.story({
+  args: {
+    className: test,
+    style: { fontFamily: "cursive", padding: "1rem 2rem" },
+  },
+});

package/lib/ShareButton/ShareButton.tsx

@@ -1,11 +1,8 @@
 import { Button, type ButtonProps } from "@ariakit/react";
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { useRevertingState } from "../use-reverting-state.ts";
 
-type AriakitButtonProps = Omit<
-  ButtonProps,
-  "children" | "onClick" | "disabled" | "value"
->;
+type AriakitButtonProps = Omit<ButtonProps, "children" | "onClick" | "value">;
 
 export type CopyToClipboardButtonProps = AriakitButtonProps & {
   value: string | null;
@@ -14,7 +11,7 @@ export type CopyToClipboardButtonProps = AriakitButtonProps & {
 };
 
 export function CopyToClipboardButton(props: CopyToClipboardButtonProps) {
-  const { children, value, revertAfterMs, ...buttonProps } = props;
+  const { children, value, revertAfterMs, disabled, ...buttonProps } = props;
   const [copiedTimestamp, setCopiedTimestamp] = useRevertingState<
     number | null
   >(null, revertAfterMs);
@@ -22,7 +19,7 @@ export function CopyToClipboardButton(props: CopyToClipboardButtonProps) {
   return (
     <Button
       {...buttonProps}
-      disabled={!value}
+      disabled={disabled || !value}
       onClick={async () => {
         if (value) {
           await navigator.clipboard.writeText(value);
@@ -42,7 +39,12 @@ export type WebShareButtonProps = AriakitButtonProps & {
 };
 
 export function WebShareButton(props: WebShareButtonProps) {
-  const { shareData, children, revertAfterMs, ...buttonProps } = props;
+  const { shareData, children, revertAfterMs, disabled, ...buttonProps } =
+    props;
+
+  // Tracking sharing state to prevent duplicate invocations of
+  // the share dialog.
+  const [sharing, setSharing] = useState(false);
 
   const [copiedTimestamp, setCopiedTimestamp] = useRevertingState<
     number | null
@@ -51,14 +53,18 @@ export function WebShareButton(props: WebShareButtonProps) {
   return (
     <Button
       {...buttonProps}
-      disabled={!shareData}
+      disabled={disabled || !shareData || sharing}
       onClick={async () => {
         if (shareData) {
           try {
+            setSharing(true);
+
             await navigator.share(shareData);
             setCopiedTimestamp(Date.now());
           } catch {
             console.info("Not shared");
+          } finally {
+            setSharing(false);
           }
         }
       }}
@@ -120,11 +126,16 @@ export function ShareButton(props: ShareButtonProps) {
     shareData,
     revertAfterMs = 1500,
     webShare = !!navigator.share,
+    ...buttonProps
   } = props;
 
   if (webShare) {
     return (
-      <WebShareButton shareData={shareData} revertAfterMs={revertAfterMs}>
+      <WebShareButton
+        {...buttonProps}
+        shareData={shareData}
+        revertAfterMs={revertAfterMs}
+      >
         {shareLabel}
       </WebShareButton>
     );
@@ -132,6 +143,7 @@ export function ShareButton(props: ShareButtonProps) {
 
   return (
     <CopyToClipboardButton
+      {...buttonProps}
       revertAfterMs={revertAfterMs}
       value={shareData?.url ?? null}
     >

package/lib/ShareButton/test.css.ts

@@ -0,0 +1,3 @@
+import { style } from "@vanilla-extract/css";
+
+export const test = style({ backgroundColor: "rebeccapurple", color: "wheat" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "5.0.0-2",
+  "version": "5.0.0-4",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
@@ -29,14 +29,14 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.0.4",
-    "@storybook/addon-links": "^10.0.4",
-    "@storybook/react-vite": "^10.0.4",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-links": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
     "@types/react": "^19.1.8",
     "msw": "^2.11.2",
     "msw-storybook-addon": "^2.0.5",
     "np": "^10.1.0",
-    "storybook": "^10.0.4",
+    "storybook": "^10.0.7",
     "typescript": "^5.8.2",
     "vite": "^6.3.5",
     "vitest": "^3.2.4"