@pollinations/ui 0.1.0-alpha.3 → 0.1.0-alpha.4

package/dist/gen/index.js

@@ -65,6 +65,7 @@ function getModalityKey(category) {
 }
 var modalityColorVar = (key) => `var(--polli-color-modality-${key})`;
 var modalityBgVar = (key) => `var(--polli-color-modality-${key}-bg)`;
+var modalityTextColor = (key) => `color-mix(in oklab, ${modalityColorVar(key)} 72%, var(--polli-color-text-strong))`;
 
 // src/modules/gen/ModalityChip.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -85,7 +86,7 @@ function ModalityChip({
       className,
       style: {
         backgroundColor: modalityBgVar(key),
-        color: `color-mix(in oklab, ${modalityColorVar(key)} 72%, var(--polli-color-text-strong))`
+        color: modalityTextColor(key)
       },
       children
     }
@@ -114,7 +115,7 @@ function ModalityDot({
 }
 
 // src/primitives/TabButton.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var tabButtonBaseClass = "polli-control polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:font-medium polli:leading-normal polli:transition-colors polli:duration-200";
 var tabButtonSizeClass = {
   xs: "polli:px-2.5 polli:py-1 polli:text-xs",
@@ -130,6 +131,7 @@ var variantClasses = {
   soft: {
     base: "",
     active: "polli:bg-theme-bg-active polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
+    mixed: "polli:bg-theme-bg-active/45 polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
     inactive: "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover"
   },
   // Transparent until hovered or selected — for multi-select toggles and
@@ -137,9 +139,20 @@ var variantClasses = {
   ghost: {
     base: "polli:border polli:border-transparent",
     active: "polli:bg-theme-bg-active polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
+    mixed: "polli:bg-theme-bg-active/45 polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover",
     inactive: "polli:bg-transparent polli:text-theme-text-base polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover"
   }
 };
+var intentClasses2 = {
+  amber: {
+    active: "polli:bg-paid-pale polli:text-paid-deep",
+    inactive: "polli:bg-transparent polli:text-theme-text-base polli:hover:bg-paid-pale/60"
+  },
+  green: {
+    active: "polli:bg-tier-pale polli:text-tier-deep",
+    inactive: "polli:bg-transparent polli:text-tier-deep polli:hover:bg-tier-pale/60"
+  }
+};
 function TabButton({
   as,
   active,
@@ -148,6 +161,7 @@ function TabButton({
   size = "md",
   variant = "soft",
   intent,
+  detail,
   ariaLabel,
   disabled = false,
   className,
@@ -155,12 +169,15 @@ function TabButton({
 }) {
   const Component = as || "button";
   const isButton = Component === "button";
-  const colors = variantClasses[intent === "neutral" ? "soft" : variant];
+  const colors = intent === "neutral" ? variantClasses.soft : intent ? {
+    ...intentClasses2[intent],
+    mixed: intentClasses2[intent].active
+  } : variantClasses[variant];
   const handleClick = disabled ? (event) => {
     event.preventDefault();
     event.stopPropagation();
   } : onClick;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs(
     Component,
     {
       ...rest,
@@ -169,16 +186,19 @@ function TabButton({
       ...Component === "a" && disabled ? { href: void 0 } : {},
       onClick: handleClick,
       ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
-      ...isButton ? { "aria-pressed": active } : { "aria-current": active ? "page" : void 0 },
+      ...isButton ? { "aria-pressed": active } : { "aria-current": active === true ? "page" : void 0 },
       className: cn(
         tabButtonBaseClass,
         variantClasses[variant].base,
-        active ? colors.active : colors.inactive,
+        active === "mixed" ? colors.mixed : active ? colors.active : colors.inactive,
         disabled && "polli:pointer-events-none polli:cursor-not-allowed polli:opacity-50",
         tabButtonSizeClass[size],
         className
       ),
-      children
+      children: [
+        children,
+        detail != null && /* @__PURE__ */ jsx4("span", { className: "polli:ml-1 polli:font-normal polli:opacity-70", children: detail })
+      ]
     }
   );
 }
@@ -209,7 +229,7 @@ function ModalityTab({
 }
 
 // src/primitives/icons/index.tsx
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var strokeProps = {
   fill: "none",
   stroke: "currentColor",
@@ -218,13 +238,13 @@ var strokeProps = {
   strokeLinejoin: "round"
 };
 function CardIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+  return /* @__PURE__ */ jsxs2("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
     /* @__PURE__ */ jsx6("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
     /* @__PURE__ */ jsx6("path", { d: "M2 10h20" })
   ] });
 }
 function SproutIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+  return /* @__PURE__ */ jsxs2("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
     /* @__PURE__ */ jsx6("path", { d: "M7 20h10" }),
     /* @__PURE__ */ jsx6("path", { d: "M10 20c5.5-2.5.8-6.4 3-10" }),
     /* @__PURE__ */ jsx6("path", { d: "M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z" }),
@@ -253,13 +273,13 @@ function ModelAccessIcon({
 }
 
 // src/primitives/Button.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var pillSizes = {
   icon: "polli:h-12 polli:w-12 polli:p-0",
   xs: "polli:h-5 polli:px-1.5 polli:py-0 polli:text-[11px] polli:leading-none",
   sm: "polli:min-h-7 polli:px-2 polli:pt-0.5 polli:pb-1",
   md: "polli:min-h-9 polli:px-4 polli:pt-1.5 polli:pb-2",
-  lg: "polli:min-h-12 polli:px-6 polli:py-3"
+  lg: "polli:min-h-12 polli:px-6 polli:py-3 polli:text-base"
 };
 var raisedSizes = {
   icon: "polli:h-12 polli:w-12 polli:p-0",
@@ -273,11 +293,11 @@ var appearanceClasses = {
   raised: "polli:rounded-xl polli:border-r-[3px] polli:border-b-[3px] polli:border-solid polli:border-theme-text-strong/20 polli:hover:border-theme-text-strong/45"
 };
 var themeClasses = "polli:bg-theme-bg-active polli:text-theme-text-strong polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover polli:transition-colors";
-var outlined = "polli:border polli:border-theme-text-soft polli:bg-surface-white polli:text-theme-text-strong polli:transition-colors polli:[.dark_&]:bg-transparent";
-var intentClasses2 = {
-  brand: `${outlined} polli:hover:bg-theme-text-soft/10`,
+var outlined = "polli:border polli:border-theme-text-soft polli:bg-theme-bg-active/30 polli:text-theme-text-strong polli:transition-colors polli:[.dark_&]:bg-transparent";
+var intentClasses3 = {
+  brand: `${outlined} polli:hover:bg-theme-bg-active/50 polli:[.dark_&]:hover:bg-theme-text-soft/10`,
   commit: `${outlined} polli:hover:border-theme-bg-active polli:hover:bg-theme-bg-active polli:focus-visible:border-theme-bg-active polli:focus-visible:bg-theme-bg-active polli:[.dark_&]:hover:bg-theme-bg-active polli:[.dark_&]:focus-visible:bg-theme-bg-active`,
-  danger: "polli:border polli:border-intent-danger-text polli:bg-transparent polli:text-intent-danger-text polli:hover:bg-intent-danger-bg-hover polli:focus-visible:bg-intent-danger-bg-hover polli:transition-colors",
+  danger: "polli:border polli:border-intent-danger-text polli:bg-intent-danger-bg-light polli:text-intent-danger-text polli:hover:bg-intent-danger-bg-hover polli:focus-visible:bg-intent-danger-bg-hover polli:transition-colors polli:[.dark_&]:bg-transparent polli:[.dark_&]:hover:bg-intent-danger-bg-hover polli:[.dark_&]:focus-visible:bg-intent-danger-bg-hover",
   info: "polli:bg-intent-info-bg-light polli:text-intent-info-text polli:hover:bg-intent-info-bg-hover polli:transition-colors",
   // Secondary actions never take the accent: one step stronger grey on hover.
   neutral: "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:hover:bg-theme-text-muted/25 polli:hover:text-theme-text-strong polli:transition-colors"
@@ -287,13 +307,15 @@ var buttonClasses = ({
   appearance = "pill",
   size,
   className,
-  disabled
+  disabled,
+  busy
 }) => {
-  const colorClasses = intent ? intentClasses2[intent] : themeClasses;
+  const colorClasses = intent ? intentClasses3[intent] : themeClasses;
   const sizeClasses = appearance === "raised" ? raisedSizes : pillSizes;
   return cn(
     "polli-control polli:inline-flex polli:items-center polli:justify-center polli:self-center polli:font-body polli:text-sm polli:font-medium polli:leading-normal polli:box-border polli:border polli:border-transparent",
-    disabled ? "polli:opacity-50 polli:cursor-not-allowed" : "polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer",
+    // A busy button is working, not unavailable: it keeps its strength.
+    busy ? "polli:cursor-progress" : disabled ? "polli:opacity-50 polli:cursor-not-allowed" : "polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer",
     colorClasses,
     appearanceClasses[appearance],
     sizeClasses[size || "md"],
@@ -316,11 +338,13 @@ function Button({
   const isAnchor = Component === "a";
   const buttonType = buttonProps.type;
   const onClick = buttonProps.onClick;
+  const ariaBusy = buttonProps["aria-busy"];
+  const busy = ariaBusy === true || ariaBusy === "true";
   const handleClick = disabled ? (event) => {
     event.preventDefault();
     event.stopPropagation();
   } : onClick;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     Component,
     {
       ...buttonProps,
@@ -334,7 +358,8 @@ function Button({
         appearance,
         size,
         className,
-        disabled
+        disabled,
+        busy
       }),
       children: [
         icon && /* @__PURE__ */ jsx8(
@@ -342,7 +367,7 @@ function Button({
           {
             "aria-hidden": "true",
             className: "polli:mr-2 polli:flex polli:size-4 polli:shrink-0 polli:[&>svg]:size-full",
-            children: icon
+            children: busy ? /* @__PURE__ */ jsx8("span", { className: "polli:block polli:size-full polli:animate-spin polli:rounded-full polli:border-2 polli:border-current polli:border-r-transparent polli:motion-reduce:animate-none" }) : icon
           }
         ),
         children
@@ -383,7 +408,7 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx9(
 import { Popover } from "@ark-ui/react/popover";
 import { Portal } from "@ark-ui/react/portal";
 import { useId, useState } from "react";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_PANEL = "polli:rounded-lg polli:bg-surface-menu polli:shadow-lg";
 var Dropdown = ({
   trigger,
@@ -404,7 +429,7 @@ var Dropdown = ({
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     Popover.Root,
     {
       ids: { trigger: triggerId },
@@ -533,7 +558,7 @@ var ScrollArea = forwardRef(
 ScrollArea.displayName = "ScrollArea";
 
 // src/modules/gen/ModelSelector.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var CATEGORY_LABELS = {
   image: "Image",
   video: "Video",
@@ -565,14 +590,14 @@ function ModelSelector({
     {
       align: "start",
       className: "polli:w-[min(24rem,calc(100vw-2rem))] polli:p-2",
-      trigger: (open) => /* @__PURE__ */ jsxs4(
+      trigger: (open) => /* @__PURE__ */ jsxs5(
         Button,
         {
           type: "button",
           "aria-label": accessibleLabel,
           className: "polli:min-w-64 polli:max-w-full polli:self-start polli:justify-between polli:gap-2",
           children: [
-            /* @__PURE__ */ jsxs4("span", { className: "polli:flex polli:min-w-0 polli:items-center polli:gap-2", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "polli:flex polli:min-w-0 polli:items-center polli:gap-2", children: [
               /* @__PURE__ */ jsx12("span", { className: "polli:truncate", children: modelLabel }),
               currentModel && /* @__PURE__ */ jsx12(
                 ModelAccessIcon,
@@ -599,8 +624,8 @@ function ModelSelector({
               onChange(id);
               close();
             },
-            children: /* @__PURE__ */ jsxs4("span", { className: "polli:flex polli:min-w-0 polli:flex-col polli:gap-0.5", children: [
-              /* @__PURE__ */ jsxs4("span", { className: "polli:flex polli:min-w-0 polli:items-center polli:gap-2", children: [
+            children: /* @__PURE__ */ jsxs5("span", { className: "polli:flex polli:min-w-0 polli:flex-col polli:gap-0.5", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "polli:flex polli:min-w-0 polli:items-center polli:gap-2", children: [
                 /* @__PURE__ */ jsx12("span", { className: "polli:truncate", children: model.title ?? model.name }),
                 /* @__PURE__ */ jsx12(
                   ModelAccessIcon,
@@ -625,6 +650,8 @@ export {
   ModelAccessIcon,
   ModelSelector,
   categoryLabel,
-  getModalityKey
+  getModalityKey,
+  modalityBgVar,
+  modalityTextColor
 };
 //# sourceMappingURL=index.js.map