@scouterna/ui-react 0.1.4 → 0.2.0

package/dist/components/app-waffle/app-waffle.d.ts

@@ -0,0 +1,10 @@
+import { Popover } from "@base-ui-components/react/popover";
+import type { ComponentProps } from "react";
+type RenderProp = ComponentProps<typeof Popover.Trigger>["render"];
+type Props = {
+    children?: RenderProp;
+    referrer: string;
+    usherUrl: string;
+};
+declare function AppWaffle({ children, referrer, usherUrl }: Props): import("react/jsx-runtime").JSX.Element;
+export { AppWaffle };

package/dist/components/app-waffle/app-waffle.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui-components/react/popover";
+import { LayoutGridIcon } from "lucide-react";
+import { usePreloadImages } from "../../lib/preload.js";
+import { Button } from "../button/button.js";
+import { useClients } from "./usher.js";
+const FALLBACK_LOGO_URL = "https://cdn.scouterna.net/jamboree26/images/app-placeholder.png";
+function AppWaffle({ children, referrer, usherUrl }) {
+    const { clients, error } = useClients({ usherUrl });
+    const imageUrls = clients.map((client) => client.logoUrl ?? FALLBACK_LOGO_URL);
+    usePreloadImages(imageUrls);
+    const clientsWithReferrer = clients.map((client) => {
+        const url = new URL(client.url);
+        url.searchParams.set("referrer", referrer);
+        return {
+            ...client,
+            url: url.toString(),
+        };
+    });
+    children = children ?? (_jsx(Button, { size: "medium-icon", variant: "text", "aria-label": "Change app", children: _jsx(LayoutGridIcon, {}) }));
+    return (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { render: children }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { sideOffset: 8, children: _jsxs(Popover.Popup, { className: "origin-[var(--transform-origin)] rounded-lg bg-[canvas] p-4 text-gray-900 shadow outline outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0", children: [_jsx(Popover.Arrow, { className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", children: _jsx(ArrowSvg, {}) }), error ? (_jsx("div", { children: "Something went wrong while loading your apps." })) : (_jsx("div", { className: "grid grid-cols-3 gap-2 grid-flow-row-dense", children: clientsWithReferrer.map((client) => (_jsx("a", { href: client.url, target: "_blank", rel: "noopener noreferrer", className: "relative size-20", children: _jsxs("div", { className: `
+                      group/app-card
+                      absolute w-full h-full min-h-full rounded-lg pt-3 pb-1 px-1 flex flex-col items-center
+                      hover:h-auto hover:bg-gray-100/80
+                      select-none
+                    `, children: [_jsx("img", { src: client.logoUrl ?? FALLBACK_LOGO_URL, alt: client.name, className: "size-9 aspect-square object-cover rounded-sm" }), _jsx("span", { className: `
+                        text-sm text-center mt-1 overflow-ellipsis line-clamp-1
+                        group-hover/app-card:line-clamp-none
+                      `, children: client.name })] }) }, client.id))) }))] }) }) })] }));
+}
+function ArrowSvg(props) {
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: This is only for display
+    _jsxs("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...props, "aria-hidden": true, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", className: "fill-[canvas]" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", className: "fill-gray-200" })] }));
+}
+export { AppWaffle };
+//# sourceMappingURL=app-waffle.js.map

package/dist/components/app-waffle/app-waffle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-waffle.js","sourceRoot":"","sources":["../../../src/components/app-waffle/app-waffle.tsx"],"names":[],"mappings":"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"}

package/dist/components/app-waffle/usher.d.ts

@@ -0,0 +1,14 @@
+export type UseClientsOptions = {
+    usherUrl: string;
+};
+export type Client = {
+    id: string;
+    url: string;
+    name: string;
+    alwaysShow: boolean;
+    logoUrl: string | null;
+};
+export declare const useClients: ({ usherUrl }: UseClientsOptions) => {
+    clients: Client[];
+    error: string | null;
+};

package/dist/components/app-waffle/usher.js

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useState } from "react";
+// Creates a temporary iframe, waits for a postMessage from it and sets a state variable to the received data
+export const useClients = ({ usherUrl }) => {
+    const [clients, setClients] = useState([]);
+    const [error, setError] = useState(null);
+    const embedUrl = useMemo(() => new URL("/embed", usherUrl), [usherUrl]);
+    useEffect(() => {
+        const iframe = document.createElement("iframe");
+        iframe.src = embedUrl.toString();
+        iframe.style.display = "none";
+        document.body.appendChild(iframe);
+        const handleMessage = (event) => {
+            if (event.origin !== embedUrl.origin)
+                return;
+            if (!("type" in event.data))
+                return;
+            if (!event.data.type.startsWith("usher-"))
+                return;
+            iframe.remove();
+            if (event.data.type === "usher-clients") {
+                setClients(event.data.data);
+            }
+            else if (event.data.type === "usher-error") {
+                console.error("Received error from Usher iframe:", event.data.error);
+                setError(event.data.error);
+            }
+            else {
+                console.log("Received unknown message type:", event.data.type);
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+            iframe.remove();
+        };
+    }, [embedUrl]);
+    return { clients, error };
+};
+//# sourceMappingURL=usher.js.map

package/dist/components/app-waffle/usher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usher.js","sourceRoot":"","sources":["../../../src/components/app-waffle/usher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAcrD,6GAA6G;AAC7G,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,GAAG,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACjC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAElC,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM;gBAAE,OAAO;YAC7C,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC;gBAAE,OAAO;YACpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBAAE,OAAO;YAElD,MAAM,CAAC,MAAM,EAAE,CAAC;YAEhB,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;gBACxC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC9B,CAAC;iBAAM,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;gBAC7C,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACrE,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,GAAG,CAAC,gCAAgC,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjE,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YACrD,MAAM,CAAC,MAAM,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAC5B,CAAC,CAAC"}

package/dist/components/button/button.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     color?: "gray" | "blue" | "orange" | "red" | "trackergreen" | "discovererblue" | "adventurerorange" | "challengerpink" | "roveryellow" | null | undefined;
     variant?: "contained" | "text" | "outlined" | null | undefined;
-    size?: "medium" | "small" | "tiny-icon" | null | undefined;
+    size?: "medium" | "small" | "medium-icon" | "small-icon" | "tiny-icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = Omit<useRender.ComponentProps<"button">, "color"> & VariantProps<typeof buttonVariants>;
 declare const Button: (props: ButtonProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/button/button.js

@@ -129,6 +129,8 @@ const buttonVariants = cva(`
         size: {
             medium: "text-base px-4 h-10 rounded-lg",
             small: "text-sm px-3 h-8 rounded-md",
+            "medium-icon": "text-base size-10 rounded-lg",
+            "small-icon": "text-sm size-8 rounded-md",
             "tiny-icon": "text-sm p-1 size-6 rounded-md",
         },
     },

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,MAAM,cAAc,GAAG,GAAG,CACxB;;;;;;;GAOC,EACD;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE;;;;;;;;;SASL;YACD,IAAI,EAAE;;;;;;;;;SASL;YACD,MAAM,EAAE;;;;;;;;;SASP;YACD,GAAG,EAAE;;;;;;;;;SASJ;YACD,YAAY,EAAE;;;;;;;;;SASb;YACD,cAAc,EAAE;;;;;;;;;SASf;YACD,gBAAgB,EAAE;;;;;;;;;SASjB;YACD,cAAc,EAAE;;;;;;;;;SASf;YACD,WAAW,EAAE;;;;;;;;;SASZ;SACF;QACD,OAAO,EAAE;YACP,SAAS,EAAE;;;;;;SAMV;YACD,IAAI,EAAE;;;;;;SAML;YACD,QAAQ,EAAE;;;;;;SAMT;SACF;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,gCAAgC;YACxC,KAAK,EAAE,6BAA6B;YACpC,WAAW,EAAE,+BAA+B;SAC7C;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,QAAQ;KACf;IACD,gBAAgB,EAAE;QAChB;YACE,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;;SAEN;SACF;QACD;YACE,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,UAAU;YACnB,KAAK,EAAE;;SAEN;SACF;KACF;CACF,CACF,CAAC;AAKF,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IACpC,MAAM;IACJ,+DAA+D;IAC/D,MAAM,GAAG,kBAAU,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAqC;QACrD,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QAClE,IAAI,EAAE,QAAQ;KACf,CAAC;IAEF,OAAO,SAAS,CAAC;QACf,MAAM;QACN,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC;KAC5C,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,MAAM,cAAc,GAAG,GAAG,CACxB;;;;;;;GAOC,EACD;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE;;;;;;;;;SASL;YACD,IAAI,EAAE;;;;;;;;;SASL;YACD,MAAM,EAAE;;;;;;;;;SASP;YACD,GAAG,EAAE;;;;;;;;;SASJ;YACD,YAAY,EAAE;;;;;;;;;SASb;YACD,cAAc,EAAE;;;;;;;;;SASf;YACD,gBAAgB,EAAE;;;;;;;;;SASjB;YACD,cAAc,EAAE;;;;;;;;;SASf;YACD,WAAW,EAAE;;;;;;;;;SASZ;SACF;QACD,OAAO,EAAE;YACP,SAAS,EAAE;;;;;;SAMV;YACD,IAAI,EAAE;;;;;;SAML;YACD,QAAQ,EAAE;;;;;;SAMT;SACF;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,gCAAgC;YACxC,KAAK,EAAE,6BAA6B;YACpC,aAAa,EAAE,8BAA8B;YAC7C,YAAY,EAAE,2BAA2B;YACzC,WAAW,EAAE,+BAA+B;SAC7C;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,QAAQ;KACf;IACD,gBAAgB,EAAE;QAChB;YACE,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;;SAEN;SACF;QACD;YACE,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,UAAU;YACnB,KAAK,EAAE;;SAEN;SACF;KACF;CACF,CACF,CAAC;AAKF,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IACpC,MAAM;IACJ,+DAA+D;IAC/D,MAAM,GAAG,kBAAU,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAqC;QACrD,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QAClE,IAAI,EAAE,QAAQ;KACf,CAAC;IAEF,OAAO,SAAS,CAAC;QACf,MAAM;QACN,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC;KAC5C,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/lib/preload.d.ts

@@ -0,0 +1,5 @@
+import type { PreloadOptions } from "react-dom";
+export type PreloadInfo = PreloadOptions & {
+    href: string;
+};
+export declare function usePreloadImages(hrefs: string[]): void;

package/dist/lib/preload.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+export function usePreloadImages(hrefs) {
+    const isBrowser = typeof window !== "undefined";
+    useEffect(() => {
+        if (!isBrowser)
+            return;
+        const uniqueHrefs = Array.from(new Set(hrefs));
+        import("react-dom")
+            .then(({ preload }) => {
+            for (const href of uniqueHrefs) {
+                preload(href, {
+                    as: "image",
+                });
+            }
+        })
+            .catch((err) => console.warn("Couldn't import react-dom:", err));
+    }, [isBrowser, hrefs]);
+}
+//# sourceMappingURL=preload.js.map

package/dist/lib/preload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preload.js","sourceRoot":"","sources":["../../src/lib/preload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,UAAU,gBAAgB,CAAC,KAAe;IAC9C,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QAE/C,MAAM,CAAC,WAAW,CAAC;aAChB,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACpB,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;gBAC/B,OAAO,CAAC,IAAI,EAAE;oBACZ,EAAE,EAAE,OAAO;iBACZ,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAA4B,EAAE,GAAG,CAAC,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;AACzB,CAAC"}

package/dist/style.css

@@ -144,6 +144,12 @@
   .ml-5 {
     margin-left: calc(var(--spacing) * 5);
   }
+  .line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
   .flex {
     display: flex;
   }
@@ -162,6 +168,9 @@
   .table {
     display: table;
   }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -174,6 +183,22 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+  .size-20 {
+    width: calc(var(--spacing) * 20);
+    height: calc(var(--spacing) * 20);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -195,6 +220,9 @@
   .min-h-48 {
     min-height: calc(var(--spacing) * 48);
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -243,9 +271,18 @@
   .appearance-none {
     appearance: none;
   }
+  .grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .grid-cols-\[1rem_auto_1rem\] {
     grid-template-columns: 1rem auto 1rem;
   }
+  .flex-col {
+    flex-direction: column;
+  }
   .items-center {
     align-items: center;
   }
@@ -323,6 +360,9 @@
   .bg-\(--btn-bg\) {
     background-color: var(--btn-bg);
   }
+  .bg-\[canvas\] {
+    background-color: canvas;
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -350,12 +390,21 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .fill-\[canvas\] {
+    fill: canvas;
+  }
   .fill-gray-100 {
     fill: var(--color-gray-100);
   }
+  .fill-gray-200 {
+    fill: var(--color-gray-200);
+  }
   .fill-gray-300 {
     fill: var(--color-gray-300);
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -377,6 +426,9 @@
   .p-40 {
     padding: calc(var(--spacing) * 40);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -401,18 +453,27 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
   .pr-\[35px\] {
     padding-right: 35px;
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
   .pl-\[25px\] {
     padding-left: 25px;
   }
+  .text-center {
+    text-align: center;
+  }
   .text-left {
     text-align: left;
   }
@@ -447,6 +508,9 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
   .text-\(--btn-bg\) {
     color: var(--btn-bg);
   }
@@ -486,6 +550,10 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -498,6 +566,13 @@
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .outline-gray-200 {
+    outline-color: var(--color-gray-200);
+  }
   .transition-\[transform\,scale\,opacity\] {
     transition-property: transform,scale,opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -699,6 +774,16 @@
       border-bottom-width: 1px;
     }
   }
+  .group-hover\/app-card\:line-clamp-none {
+    &:is(:where(.group\/app-card):hover *) {
+      @media (hover: hover) {
+        overflow: visible;
+        display: block;
+        -webkit-box-orient: horizontal;
+        -webkit-line-clamp: unset;
+      }
+    }
+  }
   .group-aria-\[haspopup\]\/item\:block {
     &:is(:where(.group\/item)[aria-haspopup] *) {
       display: block;
@@ -780,6 +865,13 @@
       background-color: var(--color-gray-300);
     }
   }
+  .hover\:h-auto {
+    &:hover {
+      @media (hover: hover) {
+        height: auto;
+      }
+    }
+  }
   .hover\:bg-\(--btn-bg-hover\) {
     &:hover {
       @media (hover: hover) {
@@ -794,6 +886,16 @@
       }
     }
   }
+  .hover\:bg-gray-100\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #f2f2ee 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-gray-100) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -976,6 +1078,11 @@
       top: calc(8px * -1);
     }
   }
+  .data-\[side\=bottom\]\:top-\[-8px\] {
+    &[data-side="bottom"] {
+      top: -8px;
+    }
+  }
   .data-\[side\=bottom\]\:rotate-0 {
     &[data-side="bottom"] {
       rotate: 0deg;
@@ -986,6 +1093,11 @@
       right: calc(13px * -1);
     }
   }
+  .data-\[side\=left\]\:right-\[-13px\] {
+    &[data-side="left"] {
+      right: -13px;
+    }
+  }
   .data-\[side\=left\]\:rotate-90 {
     &[data-side="left"] {
       rotate: 90deg;
@@ -996,6 +1108,11 @@
       left: calc(13px * -1);
     }
   }
+  .data-\[side\=right\]\:left-\[-13px\] {
+    &[data-side="right"] {
+      left: -13px;
+    }
+  }
   .data-\[side\=right\]\:-rotate-90 {
     &[data-side="right"] {
       rotate: calc(90deg * -1);
@@ -1006,6 +1123,11 @@
       bottom: calc(8px * -1);
     }
   }
+  .data-\[side\=top\]\:bottom-\[-8px\] {
+    &[data-side="top"] {
+      bottom: -8px;
+    }
+  }
   .data-\[side\=top\]\:rotate-180 {
     &[data-side="top"] {
       rotate: 180deg;
@@ -1133,6 +1255,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -1178,6 +1305,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scouterna/ui-react",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -41,6 +41,9 @@
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },
+  "peerDependencies": {
+    "react-dom": "^19.1.0"
+  },
   "devDependencies": {
     "@storybook/addon-a11y": "^8.6.14",
     "@storybook/addon-docs": "8.6.14",
@@ -52,6 +55,7 @@
     "@storybook/test": "8.6.14",
     "@tailwindcss/cli": "^4.1.11",
     "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "copyfiles": "^2.4.1",
@@ -60,6 +64,7 @@
     "storybook": "8.6.14",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
+    "vite-plugin-mkcert": "^1.17.8",
     "vitest": "^3.2.4"
   }
 }