@pollinations/ui 0.0.1 → 0.1.0-alpha.0

package/README.md

@@ -6,8 +6,15 @@ core primitives and display recipes stay SDK-free.
 
 ## Install
 
+> [!WARNING]
+> **The `alpha` line (`0.1.0-alpha.x`) is unstable and breakage-prone.** It ships the in-progress design-system rebuild (new `--polli-color-*` token system, new primitives, renamed size props `sm|md|lg`) and its API may change between alpha versions without notice. The stable `latest` line is `0.0.2`. Opt into the alpha deliberately, and pin an exact version.
+
 ```bash
+# stable (recommended)
 npm install @pollinations/ui
+
+# alpha (in-progress rebuild — pin exactly)
+npm install @pollinations/ui@alpha
 ```
 
 Install `@pollinations/sdk` too when using `@pollinations/ui/*/sdk`
@@ -87,11 +94,8 @@ The SVG sources use `currentColor`. Apps control the rendered color by inlining
 them or using them as masks. Root-level favicon, PWA icon, and SEO files stay
 app-owned.
 
-Wallet-specific colors and utilities live in a separate stylesheet:
-
-```css
-@import "@pollinations/ui/wallet.css";
-```
+Wallet colors and utilities are bundled into the main stylesheet
+(`@pollinations/ui/styles.css`) — no separate import needed.
 
 ## What's exported
 
@@ -109,22 +113,21 @@ Wallet-specific colors and utilities live in a separate stylesheet:
   These are intentionally bare wrappers around `useAuth*` hooks. They render
   the data and nothing else — no default copy, no default theme, no default
   intent. The app composes layout, copy, and color.
-- `@pollinations/ui/showcase` exports `DesignShowcase`, a package-owned
-  internal preview surface for rendering primitives and tokens together.
 - `@pollinations/ui/wallet` exports SDK-free wallet-specific display helpers
   and recipes: `formatPollen`, `PaidChip`, `TierChip`, `WalletDot`,
   `WalletBalanceCard`, `PAID_BALANCE_CHART_COLOR`, and
   `TIER_BALANCE_CHART_COLOR`.
 - `@pollinations/ui/wallet/sdk` exports SDK-backed wallet components:
   `Balance`, `KeyBudget`, `KeyExpiry`, `KeyModels`, and `KeyPrefix`.
-- `@pollinations/ui/modality` exports model-modality color recipes and
-  `ModalityButton`.
+- `@pollinations/ui/modality` exports model-modality color recipes.
 - `@pollinations/ui/assets/*` exports canonical Pollinations source SVGs:
   `logo.svg` and `logo-wordmark.svg`.
-- **Design primitives** — `Button`, `Chip`, `ChevronIcon`, `Collapsible`,
-  `CopyButton`, `Dialog`, `Dropdown`, `ExternalLinkButton`, `IconButton`,
-  `InfoTip`, `Input`, `MultiSelect`, `PeriodPicker`, `ScrollArea`, `Section`,
-  `Slider`, `StatCard`, `Surface`, `Switch`, `TabButton`, `Tooltip`.
+- **Design primitives** — `Alert`, `Button`, `ButtonGroup`, `Chip`, `ChevronIcon`,
+  `Collapsible`, `CopyButton`, `Dialog`, `Dropdown`, `ExternalLinkButton`,
+  `IconButton`, `InfoTip`, `Input`, `MultiSelect`, `PeriodPicker`,
+  `ScrollArea`, `Section`, `Slider`, `StatCard`, `Surface`, `Switch`,
+  `Table`, `TableBody`, `TableCell`, `TableHead`, `TableHeaderCell`,
+  `TableRow`, `TabButton`, `Tooltip`.
 - **Helpers** — `cn`, `useScrollLock`, `currentPeriod`,
   `getPeriodBucketKeys`, `periodBucketKeyToDate`.
 - **Theme** — `themes` (runtime array of theme names), `ThemeName` (type).
@@ -140,8 +143,8 @@ from `@pollinations/sdk/react` (`useAccountKeyUsage`, `useAccountKey`,
   such as auth, wallet, and modality.
 - Public subpath exports (`@pollinations/ui/auth`,
   `@pollinations/ui/auth/sdk`, `@pollinations/ui/wallet`,
-  `@pollinations/ui/wallet/sdk`, `@pollinations/ui/modality`,
-  `@pollinations/ui/showcase`) are built directly from those modules.
+  `@pollinations/ui/wallet/sdk`, `@pollinations/ui/modality`) are built
+  directly from those modules.
 
 ## Theming
 
@@ -186,7 +189,7 @@ with host app tokens.
 | `--polli-text-base`           | Base text size.                               |
 | `--polli-color-surface-white` | Translucent white surface.                    |
 
-Wallet tokens are public when `@pollinations/ui/wallet.css` is imported:
+Wallet tokens are public (bundled into `@pollinations/ui/styles.css`):
 
 | Token                         | Purpose                                       |
 | ----------------------------- | --------------------------------------------- |
@@ -204,6 +207,12 @@ Wallet tokens are public when `@pollinations/ui/wallet.css` is imported:
 | `--polli-color-danger-bg-light`   | Error surface background.        |
 | `--polli-color-danger-text`       | Error text foreground.           |
 | `--polli-color-danger-border`     | Error border.                    |
+| `--polli-color-success-bg-light`  | Success surface background.      |
+| `--polli-color-success-text`      | Success text foreground.         |
+| `--polli-color-success-border`    | Success border.                  |
+| `--polli-color-warning-bg-light`  | Warning surface background.      |
+| `--polli-color-warning-text`      | Warning text foreground.         |
+| `--polli-color-warning-border`    | Warning border.                  |
 
 **Example:**
 

package/dist/{Button-DMJ2K6Gr.d.ts → Button-BvLF_Km2.d.cts}

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
-import { T as ThemeName } from './theme-DfHMjWB7.js';
+import { T as ThemeName } from './theme-VMRlhqST.cjs';
 
 /** Button only supports `danger`. Label/status color recipes live on Chip. */
 type ButtonIntent = "danger";
 declare const sizes: {
-    readonly small: "polli:px-2 polli:pt-0.5 polli:pb-1";
-    readonly medium: "polli:px-4 polli:pt-1.5 polli:pb-2";
-    readonly large: "polli:px-6 polli:py-3";
+    readonly sm: "polli:px-2 polli:pt-0.5 polli:pb-1";
+    readonly md: "polli:px-4 polli:pt-1.5 polli:pb-2";
+    readonly lg: "polli:px-6 polli:py-3";
 };
 type BaseButtonProps = {
     /** Override the cascade theme for this button's subtree. Ignored when `intent` is set. */

package/dist/{Button-CNzpisJf.d.cts → Button-DQAZzvyQ.d.ts}

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
-import { T as ThemeName } from './theme-DfHMjWB7.cjs';
+import { T as ThemeName } from './theme-VMRlhqST.js';
 
 /** Button only supports `danger`. Label/status color recipes live on Chip. */
 type ButtonIntent = "danger";
 declare const sizes: {
-    readonly small: "polli:px-2 polli:pt-0.5 polli:pb-1";
-    readonly medium: "polli:px-4 polli:pt-1.5 polli:pb-2";
-    readonly large: "polli:px-6 polli:py-3";
+    readonly sm: "polli:px-2 polli:pt-0.5 polli:pb-1";
+    readonly md: "polli:px-4 polli:pt-1.5 polli:pb-2";
+    readonly lg: "polli:px-6 polli:py-3";
 };
 type BaseButtonProps = {
     /** Override the cascade theme for this button's subtree. Ignored when `intent` is set. */

package/dist/{Chip-BS8ronOu.d.ts → Chip-C5impfYd.d.ts}

@@ -1,8 +1,8 @@
 import { FC, ComponentPropsWithoutRef } from 'react';
-import { T as ThemeName } from './theme-DfHMjWB7.js';
+import { T as ThemeName } from './theme-VMRlhqST.js';
 
 /** Semantic chip labels for status and metadata badges. */
-type ChipIntent = "news" | "alpha" | "neutral";
+type ChipIntent = "news" | "alpha" | "neutral" | "success" | "warning" | "danger";
 declare const chipSizes: {
     readonly sm: "polli:px-2 polli:py-0.5 polli:text-xs";
     readonly md: "polli:px-2.5 polli:py-0.5 polli:text-sm";

package/dist/{Chip-DyqWrq0r.d.cts → Chip-SM52sUbZ.d.cts}

@@ -1,8 +1,8 @@
 import { FC, ComponentPropsWithoutRef } from 'react';
-import { T as ThemeName } from './theme-DfHMjWB7.cjs';
+import { T as ThemeName } from './theme-VMRlhqST.cjs';
 
 /** Semantic chip labels for status and metadata badges. */
-type ChipIntent = "news" | "alpha" | "neutral";
+type ChipIntent = "news" | "alpha" | "neutral" | "success" | "warning" | "danger";
 declare const chipSizes: {
     readonly sm: "polli:px-2 polli:py-0.5 polli:text-xs";
     readonly md: "polli:px-2.5 polli:py-0.5 polli:text-sm";

package/dist/app.css

@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/suspicious/noUnknownAtRules: tailwind handles it */
-@import "@pollinations/ui/styles.css";
+@import "./styles.css";
 @import "tailwindcss";
 
 /* Tailwind utility surface for Pollinations UI app classes.

package/dist/auth/index.cjs

@@ -34,6 +34,7 @@ var logo_default = 'data:image/svg+xml,<?xml version="1.0" encoding="utf-8"?>%0A
 // src/primitives/Dialog.tsx
 var import_dialog = require("@ark-ui/react/dialog");
 var import_portal = require("@ark-ui/react/portal");
+var import_react = require("react");
 
 // src/lib/cn.ts
 var import_clsx = require("clsx");
@@ -67,76 +68,89 @@ var Dialog = ({
   positionerClassName,
   contentClassName,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-  import_dialog.Dialog.Root,
-  {
-    open,
-    onOpenChange: (details) => onOpenChange?.(details.open),
-    children: [
-      trigger && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_dialog.Dialog.Trigger,
-        {
-          asChild: triggerAsChild,
-          className: triggerClassName,
-          children: trigger
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_portal.Portal, { children: [
-        showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_dialog.Dialog.Backdrop,
+}) => {
+  const contentRef = (0, import_react.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_dialog.Dialog.Root,
+    {
+      open,
+      initialFocusEl: () => contentRef.current,
+      onOpenChange: (details) => onOpenChange?.(details.open),
+      children: [
+        trigger && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_dialog.Dialog.Trigger,
           {
-            className: cn(
-              "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
-              backdropClassName
-            )
+            asChild: triggerAsChild,
+            className: triggerClassName,
+            children: trigger
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_dialog.Dialog.Positioner,
-          {
-            className: cn(
-              "polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4",
-              positionerClassName
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              import_dialog.Dialog.Content,
-              {
-                "data-theme": theme,
-                "aria-label": ariaLabel,
-                "aria-labelledby": labelledBy,
-                className: cn(
-                  "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg",
-                  sizeClasses[size],
-                  contentClassName
-                ),
-                children: [
-                  title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    DialogTitle,
-                    {
-                      className: cn(
-                        "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
-                        titleClassName
-                      ),
-                      children: title
-                    }
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_portal.Portal, { children: [
+          showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dialog.Dialog.Backdrop,
+            {
+              className: cn(
+                "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
+                backdropClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dialog.Dialog.Positioner,
+            {
+              "data-theme": theme,
+              className: cn(
+                "polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4",
+                positionerClassName
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_dialog.Dialog.Content,
+                {
+                  ref: contentRef,
+                  "data-theme": theme,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": labelledBy,
+                  className: cn(
+                    "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg polli:outline-none polli:focus:outline-none polli:focus-visible:outline-none",
+                    sizeClasses[size],
+                    contentClassName
                   ),
-                  children
-                ]
-              }
-            )
-          }
-        )
-      ] })
-    ]
-  }
-);
+                  children: [
+                    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      DialogTitle,
+                      {
+                        className: cn(
+                          "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
+                          titleClassName
+                        ),
+                        children: title
+                      }
+                    ),
+                    children
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var DialogTitle = import_dialog.Dialog.Title;
 
 // src/modules/auth/AuthModal.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var authLogoMaskUrl = `url('${logo_default}')`;
 var authLogoMask = {
-  WebkitMask: `url(${logo_default}) center / contain no-repeat`,
-  mask: `url(${logo_default}) center / contain no-repeat`
+  WebkitMaskImage: authLogoMaskUrl,
+  WebkitMaskPosition: "center",
+  WebkitMaskRepeat: "no-repeat",
+  WebkitMaskSize: "contain",
+  maskImage: authLogoMaskUrl,
+  maskPosition: "center",
+  maskRepeat: "no-repeat",
+  maskSize: "contain"
 };
 function AuthModal({
   children,
@@ -165,7 +179,8 @@ function AuthModalHeader({ children }) {
       href: "https://pollinations.ai",
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "polli:block polli:shrink-0 polli:text-theme-text-strong",
+      tabIndex: -1,
+      className: "polli:block polli:shrink-0 polli:text-theme-text-strong polli:focus:outline-none",
       "aria-label": "pollinations.ai",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "polli:sr-only", children: "pollinations.ai" }),
@@ -199,18 +214,10 @@ function ErrorBanner({ children }) {
 }
 function AuthInfoCard({
   title = "Authorize",
-  titleId,
   children
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-theme-bg-pale polli:p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "p",
-      {
-        id: titleId,
-        className: "polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft",
-        children: title
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft", children: title }),
     children
   ] });
 }

package/dist/auth/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modules/auth/index.ts","../../src/primitives/Dialog.tsx","../../src/lib/cn.ts","../../src/modules/auth/AuthModal.tsx"],"sourcesContent":["export {\n    AuthInfoCard,\n    type AuthInfoCardProps,\n    AuthModal,\n    AuthModalHeader,\n    type AuthModalHeaderProps,\n    AuthModalLoading,\n    type AuthModalProps,\n    ErrorBanner,\n} from \"./AuthModal.tsx\";\n","import { Dialog as ArkDialog } from \"@ark-ui/react/dialog\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport type { FC, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\nconst sizeClasses = {\n    sm: \"polli:max-w-md\",\n    md: \"polli:max-w-xl\",\n    lg: \"polli:max-w-2xl\",\n} as const;\n\nexport type DialogProps = {\n    open: boolean;\n    onOpenChange?: (open: boolean) => void;\n    trigger?: ReactNode;\n    triggerAsChild?: boolean;\n    triggerClassName?: string;\n    title?: ReactNode;\n    titleClassName?: string;\n    ariaLabel?: string;\n    labelledBy?: string;\n    theme?: ThemeName;\n    size?: keyof typeof sizeClasses;\n    showBackdrop?: boolean;\n    backdropClassName?: string;\n    positionerClassName?: string;\n    contentClassName?: string;\n    children: ReactNode;\n};\n\nexport const Dialog: FC<DialogProps> = ({\n    open,\n    onOpenChange,\n    trigger,\n    triggerAsChild = false,\n    triggerClassName,\n    title,\n    titleClassName,\n    ariaLabel,\n    labelledBy,\n    theme = \"blue\",\n    size = \"md\",\n    showBackdrop = true,\n    backdropClassName,\n    positionerClassName,\n    contentClassName,\n    children,\n}) => (\n    <ArkDialog.Root\n        open={open}\n        onOpenChange={(details) => onOpenChange?.(details.open)}\n    >\n        {trigger && (\n            <ArkDialog.Trigger\n                asChild={triggerAsChild}\n                className={triggerClassName}\n            >\n                {trigger}\n            </ArkDialog.Trigger>\n        )}\n        <Portal>\n            {showBackdrop && (\n                <ArkDialog.Backdrop\n                    className={cn(\n                        \"polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50\",\n                        backdropClassName,\n                    )}\n                />\n            )}\n            <ArkDialog.Positioner\n                className={cn(\n                    \"polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4\",\n                    positionerClassName,\n                )}\n            >\n                <ArkDialog.Content\n                    data-theme={theme}\n                    aria-label={ariaLabel}\n                    aria-labelledby={labelledBy}\n                    className={cn(\n                        \"polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg\",\n                        sizeClasses[size],\n                        contentClassName,\n                    )}\n                >\n                    {title && (\n                        <DialogTitle\n                            className={cn(\n                                \"polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong\",\n                                titleClassName,\n                            )}\n                        >\n                            {title}\n                        </DialogTitle>\n                    )}\n                    {children}\n                </ArkDialog.Content>\n            </ArkDialog.Positioner>\n        </Portal>\n    </ArkDialog.Root>\n);\n\nexport const DialogTitle = ArkDialog.Title;\n","import { clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"polli\" });\n\n/** Internal class merge for polli:-prefixed package primitive classes. */\nexport function cn(...inputs: (string | undefined | null | false)[]) {\n    return twMerge(clsx(...inputs));\n}\n","import type { CSSProperties, ReactNode } from \"react\";\nimport logoUrl from \"../../assets/logo.svg\";\nimport { Dialog } from \"../../primitives/Dialog.tsx\";\n\nconst authLogoMask: CSSProperties = {\n    WebkitMask: `url(${logoUrl}) center / contain no-repeat`,\n    mask: `url(${logoUrl}) center / contain no-repeat`,\n};\n\nexport type AuthModalProps = {\n    children: ReactNode;\n    dialog?: {\n        label?: string;\n        labelledBy?: string;\n    };\n    tone?: \"default\" | \"error\";\n};\n\nexport function AuthModal({\n    children,\n    dialog,\n    tone = \"default\",\n}: AuthModalProps) {\n    const borderClass =\n        tone === \"error\"\n            ? \"polli:border-intent-danger-border\"\n            : \"polli:border-theme-border\";\n    return (\n        <Dialog\n            open\n            theme=\"amber\"\n            showBackdrop={false}\n            ariaLabel={dialog?.label}\n            labelledBy={dialog?.labelledBy}\n            positionerClassName=\"polli:items-start polli:overflow-y-auto polli:bg-theme-bg-pale\"\n            contentClassName={`polli:bg-surface-white polli:border-2 ${borderClass} polli:rounded-lg polli:shadow-lg polli:max-w-xl polli:w-full polli:my-auto`}\n        >\n            {children}\n        </Dialog>\n    );\n}\n\nexport type AuthModalHeaderProps = {\n    children?: ReactNode;\n};\n\nexport function AuthModalHeader({ children }: AuthModalHeaderProps) {\n    const logo = (\n        <a\n            href=\"https://pollinations.ai\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"polli:block polli:shrink-0 polli:text-theme-text-strong\"\n            aria-label=\"pollinations.ai\"\n        >\n            <span className=\"polli:sr-only\">pollinations.ai</span>\n            <span\n                aria-hidden=\"true\"\n                className=\"polli:block polli:h-8 polli:w-8 polli:bg-current\"\n                style={authLogoMask}\n            />\n        </a>\n    );\n    if (!children) {\n        return (\n            <div className=\"polli:flex polli:justify-start polli:px-6 polli:pt-6\">\n                {logo}\n            </div>\n        );\n    }\n    return (\n        <div className=\"polli:px-6 polli:pt-6 polli:pb-2\">\n            <div className=\"polli:flex polli:items-center polli:justify-between polli:gap-3\">\n                {logo}\n                {children}\n            </div>\n        </div>\n    );\n}\n\nexport function AuthModalLoading() {\n    return (\n        <AuthModal>\n            <AuthModalHeader />\n            <div className=\"polli:px-8 polli:pt-2 polli:pb-8 polli:text-center\">\n                <p className=\"polli:text-theme-text-strong\">Loading...</p>\n            </div>\n        </AuthModal>\n    );\n}\n\nexport function ErrorBanner({ children }: { children: ReactNode }) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:p-4\">\n            <p className=\"polli:text-sm polli:text-intent-danger-text\">\n                {children}\n            </p>\n        </div>\n    );\n}\n\nexport type AuthInfoCardProps = {\n    title?: string;\n    titleId?: string;\n    children: ReactNode;\n};\n\nexport function AuthInfoCard({\n    title = \"Authorize\",\n    titleId,\n    children,\n}: AuthInfoCardProps) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-theme-bg-pale polli:p-4\">\n            <p\n                id={titleId}\n                className=\"polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft\"\n            >\n                {title}\n            </p>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"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","names":["ArkDialog","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/modules/auth/index.ts","../../src/primitives/Dialog.tsx","../../src/lib/cn.ts","../../src/modules/auth/AuthModal.tsx"],"sourcesContent":["export {\n    AuthInfoCard,\n    type AuthInfoCardProps,\n    AuthModal,\n    AuthModalHeader,\n    type AuthModalHeaderProps,\n    AuthModalLoading,\n    type AuthModalProps,\n    ErrorBanner,\n} from \"./AuthModal.tsx\";\n","import { Dialog as ArkDialog } from \"@ark-ui/react/dialog\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport type { FC, ReactNode } from \"react\";\nimport { useRef } from \"react\";\nimport { cn } from \"../lib/cn.ts\";\nimport type { ThemeName } from \"../theme.ts\";\n\nconst sizeClasses = {\n    sm: \"polli:max-w-md\",\n    md: \"polli:max-w-xl\",\n    lg: \"polli:max-w-2xl\",\n} as const;\n\nexport type DialogProps = {\n    open: boolean;\n    onOpenChange?: (open: boolean) => void;\n    trigger?: ReactNode;\n    triggerAsChild?: boolean;\n    triggerClassName?: string;\n    title?: ReactNode;\n    titleClassName?: string;\n    ariaLabel?: string;\n    labelledBy?: string;\n    theme?: ThemeName;\n    size?: keyof typeof sizeClasses;\n    showBackdrop?: boolean;\n    backdropClassName?: string;\n    positionerClassName?: string;\n    contentClassName?: string;\n    children: ReactNode;\n};\n\nexport const Dialog: FC<DialogProps> = ({\n    open,\n    onOpenChange,\n    trigger,\n    triggerAsChild = false,\n    triggerClassName,\n    title,\n    titleClassName,\n    ariaLabel,\n    labelledBy,\n    theme = \"blue\",\n    size = \"md\",\n    showBackdrop = true,\n    backdropClassName,\n    positionerClassName,\n    contentClassName,\n    children,\n}) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <ArkDialog.Root\n            open={open}\n            initialFocusEl={() => contentRef.current}\n            onOpenChange={(details) => onOpenChange?.(details.open)}\n        >\n            {trigger && (\n                <ArkDialog.Trigger\n                    asChild={triggerAsChild}\n                    className={triggerClassName}\n                >\n                    {trigger}\n                </ArkDialog.Trigger>\n            )}\n            <Portal>\n                {showBackdrop && (\n                    <ArkDialog.Backdrop\n                        className={cn(\n                            \"polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50\",\n                            backdropClassName,\n                        )}\n                    />\n                )}\n                <ArkDialog.Positioner\n                    data-theme={theme}\n                    className={cn(\n                        \"polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4\",\n                        positionerClassName,\n                    )}\n                >\n                    <ArkDialog.Content\n                        ref={contentRef}\n                        data-theme={theme}\n                        aria-label={ariaLabel}\n                        aria-labelledby={labelledBy}\n                        className={cn(\n                            \"polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg polli:outline-none polli:focus:outline-none polli:focus-visible:outline-none\",\n                            sizeClasses[size],\n                            contentClassName,\n                        )}\n                    >\n                        {title && (\n                            <DialogTitle\n                                className={cn(\n                                    \"polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong\",\n                                    titleClassName,\n                                )}\n                            >\n                                {title}\n                            </DialogTitle>\n                        )}\n                        {children}\n                    </ArkDialog.Content>\n                </ArkDialog.Positioner>\n            </Portal>\n        </ArkDialog.Root>\n    );\n};\n\nexport const DialogTitle = ArkDialog.Title;\n","import { clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"polli\" });\n\n/** Internal class merge for polli:-prefixed package primitive classes. */\nexport function cn(...inputs: (string | undefined | null | false)[]) {\n    return twMerge(clsx(...inputs));\n}\n","import type { CSSProperties, ReactNode } from \"react\";\nimport logoUrl from \"../../assets/logo.svg\";\nimport { Dialog } from \"../../primitives/Dialog.tsx\";\n\nconst authLogoMaskUrl = `url('${logoUrl}')`;\n\nconst authLogoMask: CSSProperties = {\n    WebkitMaskImage: authLogoMaskUrl,\n    WebkitMaskPosition: \"center\",\n    WebkitMaskRepeat: \"no-repeat\",\n    WebkitMaskSize: \"contain\",\n    maskImage: authLogoMaskUrl,\n    maskPosition: \"center\",\n    maskRepeat: \"no-repeat\",\n    maskSize: \"contain\",\n};\n\nexport type AuthModalProps = {\n    children: ReactNode;\n    dialog?: {\n        label?: string;\n        labelledBy?: string;\n    };\n    tone?: \"default\" | \"error\";\n};\n\nexport function AuthModal({\n    children,\n    dialog,\n    tone = \"default\",\n}: AuthModalProps) {\n    const borderClass =\n        tone === \"error\"\n            ? \"polli:border-intent-danger-border\"\n            : \"polli:border-theme-border\";\n    return (\n        <Dialog\n            open\n            theme=\"amber\"\n            showBackdrop={false}\n            ariaLabel={dialog?.label}\n            labelledBy={dialog?.labelledBy}\n            positionerClassName=\"polli:items-start polli:overflow-y-auto polli:bg-theme-bg-pale\"\n            contentClassName={`polli:bg-surface-white polli:border-2 ${borderClass} polli:rounded-lg polli:shadow-lg polli:max-w-xl polli:w-full polli:my-auto`}\n        >\n            {children}\n        </Dialog>\n    );\n}\n\nexport type AuthModalHeaderProps = {\n    children?: ReactNode;\n};\n\nexport function AuthModalHeader({ children }: AuthModalHeaderProps) {\n    const logo = (\n        <a\n            href=\"https://pollinations.ai\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            tabIndex={-1}\n            className=\"polli:block polli:shrink-0 polli:text-theme-text-strong polli:focus:outline-none\"\n            aria-label=\"pollinations.ai\"\n        >\n            <span className=\"polli:sr-only\">pollinations.ai</span>\n            <span\n                aria-hidden=\"true\"\n                className=\"polli:block polli:h-8 polli:w-8 polli:bg-current\"\n                style={authLogoMask}\n            />\n        </a>\n    );\n    if (!children) {\n        return (\n            <div className=\"polli:flex polli:justify-start polli:px-6 polli:pt-6\">\n                {logo}\n            </div>\n        );\n    }\n    return (\n        <div className=\"polli:px-6 polli:pt-6 polli:pb-2\">\n            <div className=\"polli:flex polli:items-center polli:justify-between polli:gap-3\">\n                {logo}\n                {children}\n            </div>\n        </div>\n    );\n}\n\nexport function AuthModalLoading() {\n    return (\n        <AuthModal>\n            <AuthModalHeader />\n            <div className=\"polli:px-8 polli:pt-2 polli:pb-8 polli:text-center\">\n                <p className=\"polli:text-theme-text-strong\">Loading...</p>\n            </div>\n        </AuthModal>\n    );\n}\n\nexport function ErrorBanner({ children }: { children: ReactNode }) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:p-4\">\n            <p className=\"polli:text-sm polli:text-intent-danger-text\">\n                {children}\n            </p>\n        </div>\n    );\n}\n\nexport type AuthInfoCardProps = {\n    title?: string;\n    children: ReactNode;\n};\n\nexport function AuthInfoCard({\n    title = \"Authorize\",\n    children,\n}: AuthInfoCardProps) {\n    return (\n        <div className=\"polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-theme-bg-pale polli:p-4\">\n            <p className=\"polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft\">\n                {title}\n            </p>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"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","names":["ArkDialog","import_jsx_runtime"]}

package/dist/auth/index.d.cts

@@ -20,9 +20,8 @@ declare function ErrorBanner({ children }: {
 }): react_jsx_runtime.JSX.Element;
 type AuthInfoCardProps = {
     title?: string;
-    titleId?: string;
     children: ReactNode;
 };
-declare function AuthInfoCard({ title, titleId, children, }: AuthInfoCardProps): react_jsx_runtime.JSX.Element;
+declare function AuthInfoCard({ title, children, }: AuthInfoCardProps): react_jsx_runtime.JSX.Element;
 
 export { AuthInfoCard, type AuthInfoCardProps, AuthModal, AuthModalHeader, type AuthModalHeaderProps, AuthModalLoading, type AuthModalProps, ErrorBanner };

package/dist/auth/index.d.ts

@@ -20,9 +20,8 @@ declare function ErrorBanner({ children }: {
 }): react_jsx_runtime.JSX.Element;
 type AuthInfoCardProps = {
     title?: string;
-    titleId?: string;
     children: ReactNode;
 };
-declare function AuthInfoCard({ title, titleId, children, }: AuthInfoCardProps): react_jsx_runtime.JSX.Element;
+declare function AuthInfoCard({ title, children, }: AuthInfoCardProps): react_jsx_runtime.JSX.Element;
 
 export { AuthInfoCard, type AuthInfoCardProps, AuthModal, AuthModalHeader, type AuthModalHeaderProps, AuthModalLoading, type AuthModalProps, ErrorBanner };

package/dist/auth/index.js

@@ -4,6 +4,7 @@ var logo_default = 'data:image/svg+xml,<?xml version="1.0" encoding="utf-8"?>%0A
 // src/primitives/Dialog.tsx
 import { Dialog as ArkDialog } from "@ark-ui/react/dialog";
 import { Portal } from "@ark-ui/react/portal";
+import { useRef } from "react";
 
 // src/lib/cn.ts
 import { clsx } from "clsx";
@@ -37,76 +38,89 @@ var Dialog = ({
   positionerClassName,
   contentClassName,
   children
-}) => /* @__PURE__ */ jsxs(
-  ArkDialog.Root,
-  {
-    open,
-    onOpenChange: (details) => onOpenChange?.(details.open),
-    children: [
-      trigger && /* @__PURE__ */ jsx(
-        ArkDialog.Trigger,
-        {
-          asChild: triggerAsChild,
-          className: triggerClassName,
-          children: trigger
-        }
-      ),
-      /* @__PURE__ */ jsxs(Portal, { children: [
-        showBackdrop && /* @__PURE__ */ jsx(
-          ArkDialog.Backdrop,
+}) => {
+  const contentRef = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    ArkDialog.Root,
+    {
+      open,
+      initialFocusEl: () => contentRef.current,
+      onOpenChange: (details) => onOpenChange?.(details.open),
+      children: [
+        trigger && /* @__PURE__ */ jsx(
+          ArkDialog.Trigger,
           {
-            className: cn(
-              "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
-              backdropClassName
-            )
+            asChild: triggerAsChild,
+            className: triggerClassName,
+            children: trigger
           }
         ),
-        /* @__PURE__ */ jsx(
-          ArkDialog.Positioner,
-          {
-            className: cn(
-              "polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4",
-              positionerClassName
-            ),
-            children: /* @__PURE__ */ jsxs(
-              ArkDialog.Content,
-              {
-                "data-theme": theme,
-                "aria-label": ariaLabel,
-                "aria-labelledby": labelledBy,
-                className: cn(
-                  "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg",
-                  sizeClasses[size],
-                  contentClassName
-                ),
-                children: [
-                  title && /* @__PURE__ */ jsx(
-                    DialogTitle,
-                    {
-                      className: cn(
-                        "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
-                        titleClassName
-                      ),
-                      children: title
-                    }
+        /* @__PURE__ */ jsxs(Portal, { children: [
+          showBackdrop && /* @__PURE__ */ jsx(
+            ArkDialog.Backdrop,
+            {
+              className: cn(
+                "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
+                backdropClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ArkDialog.Positioner,
+            {
+              "data-theme": theme,
+              className: cn(
+                "polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4",
+                positionerClassName
+              ),
+              children: /* @__PURE__ */ jsxs(
+                ArkDialog.Content,
+                {
+                  ref: contentRef,
+                  "data-theme": theme,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": labelledBy,
+                  className: cn(
+                    "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg polli:outline-none polli:focus:outline-none polli:focus-visible:outline-none",
+                    sizeClasses[size],
+                    contentClassName
                   ),
-                  children
-                ]
-              }
-            )
-          }
-        )
-      ] })
-    ]
-  }
-);
+                  children: [
+                    title && /* @__PURE__ */ jsx(
+                      DialogTitle,
+                      {
+                        className: cn(
+                          "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
+                          titleClassName
+                        ),
+                        children: title
+                      }
+                    ),
+                    children
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var DialogTitle = ArkDialog.Title;
 
 // src/modules/auth/AuthModal.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var authLogoMaskUrl = `url('${logo_default}')`;
 var authLogoMask = {
-  WebkitMask: `url(${logo_default}) center / contain no-repeat`,
-  mask: `url(${logo_default}) center / contain no-repeat`
+  WebkitMaskImage: authLogoMaskUrl,
+  WebkitMaskPosition: "center",
+  WebkitMaskRepeat: "no-repeat",
+  WebkitMaskSize: "contain",
+  maskImage: authLogoMaskUrl,
+  maskPosition: "center",
+  maskRepeat: "no-repeat",
+  maskSize: "contain"
 };
 function AuthModal({
   children,
@@ -135,7 +149,8 @@ function AuthModalHeader({ children }) {
       href: "https://pollinations.ai",
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "polli:block polli:shrink-0 polli:text-theme-text-strong",
+      tabIndex: -1,
+      className: "polli:block polli:shrink-0 polli:text-theme-text-strong polli:focus:outline-none",
       "aria-label": "pollinations.ai",
       children: [
         /* @__PURE__ */ jsx2("span", { className: "polli:sr-only", children: "pollinations.ai" }),
@@ -169,18 +184,10 @@ function ErrorBanner({ children }) {
 }
 function AuthInfoCard({
   title = "Authorize",
-  titleId,
   children
 }) {
   return /* @__PURE__ */ jsxs2("div", { className: "polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-theme-bg-pale polli:p-4", children: [
-    /* @__PURE__ */ jsx2(
-      "p",
-      {
-        id: titleId,
-        className: "polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft",
-        children: title
-      }
-    ),
+    /* @__PURE__ */ jsx2("p", { className: "polli:mb-2 polli:font-body polli:text-xs polli:font-semibold polli:tracking-wide polli:text-theme-text-soft", children: title }),
     children
   ] });
 }