@pollinations/ui 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/index.d.cts

@@ -787,13 +787,17 @@ declare const toneClasses: {
     readonly neutral: "polli:bg-theme-bg-subtle polli:text-theme-text-strong";
     readonly paid: "polli-wallet-chip-paid";
     readonly tier: "polli-wallet-chip-tier";
+    readonly info: "polli:bg-intent-info-bg-light polli:text-intent-info-text";
 };
 type IconTileProps = {
     icon: ComponentType<IconProps>;
     tone?: keyof typeof toneClasses;
+    /** Any colour (e.g. a modality colour): the icon takes it and the tile a
+     * pale wash of it. Overrides `tone`. */
+    color?: string;
 };
 /** A 44px rounded square holding one icon, leading a feature or info row. */
-declare function IconTile({ icon: Icon, tone }: IconTileProps): react_jsx_runtime.JSX.Element;
+declare function IconTile({ icon: Icon, tone, color, }: IconTileProps): react_jsx_runtime.JSX.Element;
 
 type BaseInlineLinkProps = {
     /** Set explicitly for non-http external links, or false for custom routing components. */

package/dist/index.d.ts

@@ -787,13 +787,17 @@ declare const toneClasses: {
     readonly neutral: "polli:bg-theme-bg-subtle polli:text-theme-text-strong";
     readonly paid: "polli-wallet-chip-paid";
     readonly tier: "polli-wallet-chip-tier";
+    readonly info: "polli:bg-intent-info-bg-light polli:text-intent-info-text";
 };
 type IconTileProps = {
     icon: ComponentType<IconProps>;
     tone?: keyof typeof toneClasses;
+    /** Any colour (e.g. a modality colour): the icon takes it and the tile a
+     * pale wash of it. Overrides `tone`. */
+    color?: string;
 };
 /** A 44px rounded square holding one icon, leading a feature or info row. */
-declare function IconTile({ icon: Icon, tone }: IconTileProps): react_jsx_runtime.JSX.Element;
+declare function IconTile({ icon: Icon, tone, color, }: IconTileProps): react_jsx_runtime.JSX.Element;
 
 type BaseInlineLinkProps = {
     /** Set explicitly for non-http external links, or false for custom routing components. */

package/dist/index.js

@@ -4110,28 +4110,22 @@ var StatCard = ({
   labelClassName,
   valueClassName,
   detailClassName
-}) => variant === "display" ? /* @__PURE__ */ jsxs32(
-  "div",
-  {
-    className: cn("polli:flex polli:flex-col polli:gap-1.5", className),
-    children: [
-      /* @__PURE__ */ jsx45("div", { className: cn(valueVariantClasses.display, valueClassName), children: value }),
-      /* @__PURE__ */ jsx45(
-        Text,
-        {
-          as: "div",
-          size: "sm",
-          tone: "muted",
-          className: cn(
-            "polli:flex polli:items-center polli:gap-2",
-            labelClassName
-          ),
-          children: label
-        }
-      )
-    ]
-  }
-) : /* @__PURE__ */ jsxs32("div", { className: cn("polli:text-sm", className), children: [
+}) => variant === "display" ? /* @__PURE__ */ jsxs32("div", { className: cn("polli:flex polli:flex-col polli:gap-1", className), children: [
+  /* @__PURE__ */ jsx45("div", { className: cn(valueVariantClasses.display, valueClassName), children: value }),
+  /* @__PURE__ */ jsx45(
+    Text,
+    {
+      as: "div",
+      size: "sm",
+      tone: "soft",
+      className: cn(
+        "polli:flex polli:items-center polli:gap-2 polli:leading-tight",
+        labelClassName
+      ),
+      children: label
+    }
+  )
+] }) : /* @__PURE__ */ jsxs32("div", { className: cn("polli:text-sm", className), children: [
   /* @__PURE__ */ jsx45(
     Text,
     {
@@ -4676,16 +4670,25 @@ var toneClasses = {
   neutral: "polli:bg-theme-bg-subtle polli:text-theme-text-strong",
   // The wallet's Paid and Quest Pollen colours, for rows about money.
   paid: "polli-wallet-chip-paid",
-  tier: "polli-wallet-chip-tier"
+  tier: "polli-wallet-chip-tier",
+  info: "polli:bg-intent-info-bg-light polli:text-intent-info-text"
 };
-function IconTile({ icon: Icon, tone = "neutral" }) {
+function IconTile({
+  icon: Icon,
+  tone = "neutral",
+  color
+}) {
   return /* @__PURE__ */ jsx53(
     "span",
     {
       className: cn(
         "polli:flex polli:size-11 polli:shrink-0 polli:items-center polli:justify-center polli:rounded-xl",
-        toneClasses[tone]
+        !color && toneClasses[tone]
       ),
+      style: color ? {
+        color,
+        backgroundColor: `color-mix(in oklab, ${color} 14%, transparent)`
+      } : void 0,
       children: /* @__PURE__ */ jsx53(Icon, { "aria-hidden": "true", className: "polli:size-6" })
     }
   );