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

package/dist/gen/index.js

@@ -0,0 +1,630 @@
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({ prefix: "polli" });
+function cn(...inputs) {
+  return twMerge(clsx(...inputs));
+}
+
+// src/primitives/Chip.tsx
+import { jsx } from "react/jsx-runtime";
+var chipSizes = {
+  icon: "polli:h-5 polli:w-5 polli:p-0 polli:text-xs",
+  sm: "polli:h-5 polli:px-2 polli:text-xs",
+  md: "polli:h-6 polli:px-2.5 polli:text-sm",
+  lg: "polli:h-7 polli:px-3 polli:text-sm"
+};
+var intentClasses = {
+  news: "polli:bg-intent-news-bg-light polli:text-intent-news-text",
+  new: "polli:bg-intent-new-bg-light polli:text-intent-new-text",
+  free: "polli:bg-intent-free-bg-light polli:text-intent-free-text",
+  alpha: "polli:bg-intent-alpha-bg-light polli:text-intent-alpha-text",
+  neutral: "polli:bg-ink-100/80 polli:text-ink-900",
+  success: "polli:bg-intent-success-bg-bright/15 polli:text-intent-success-text",
+  warning: "polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  info: "polli:bg-intent-info-bg-light polli:text-intent-info-text",
+  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
+};
+var Chip = ({
+  intent,
+  size = "md",
+  className,
+  children,
+  ...rest
+}) => {
+  const intentClass = intent ? intentClasses[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cn(
+        "polli:inline-flex polli:shrink-0 polli:items-center polli:justify-center polli:gap-1 polli:rounded-lg polli:font-medium polli:leading-none",
+        chipSizes[size],
+        intentClass,
+        className
+      ),
+      children
+    }
+  );
+};
+
+// src/modules/gen/themes.ts
+var MODALITIES = [
+  "text",
+  "image",
+  "video",
+  "audio",
+  "realtime",
+  "embedding"
+];
+function getModalityKey(category) {
+  const lower = category.toLowerCase();
+  if (lower === "images") return "image";
+  if (lower === "embeddings") return "embedding";
+  return MODALITIES.includes(lower) ? lower : null;
+}
+var modalityColorVar = (key) => `var(--polli-color-modality-${key})`;
+var modalityBgVar = (key) => `var(--polli-color-modality-${key}-bg)`;
+
+// src/modules/gen/ModalityChip.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ModalityChip({
+  modality,
+  size = "sm",
+  className,
+  children
+}) {
+  const key = getModalityKey(modality);
+  if (!key) {
+    return /* @__PURE__ */ jsx2(Chip, { intent: "neutral", size, className, children });
+  }
+  return /* @__PURE__ */ jsx2(
+    Chip,
+    {
+      size,
+      className,
+      style: {
+        backgroundColor: modalityBgVar(key),
+        color: `color-mix(in oklab, ${modalityColorVar(key)} 72%, var(--polli-color-text-strong))`
+      },
+      children
+    }
+  );
+}
+
+// src/modules/gen/ModalityDot.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ModalityDot({
+  modality,
+  className
+}) {
+  const key = getModalityKey(modality);
+  if (!key) return null;
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "polli:inline-block polli:size-2 polli:shrink-0 polli:rounded-full",
+        className
+      ),
+      style: { backgroundColor: modalityColorVar(key) }
+    }
+  );
+}
+
+// src/primitives/TabButton.tsx
+import { jsx as jsx4 } 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",
+  lg: "polli:px-5 polli:py-2 polli:text-lg",
+  md: "polli:px-4 polli:py-1.5 polli:text-base",
+  sm: "polli:px-3 polli:py-1.5 polli:text-sm"
+};
+var variantClasses = {
+  // The default tab look: borderless and monochrome. Selected uses `bg-active`
+  // — the same light resting fill as the site's normal buttons. Both states
+  // deepen to `bg-hover` and use the theme's hover label color. Non-selected
+  // uses the quiet `bg-subtle` token until then.
+  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",
+    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
+  // inline rows where a filled idle pill would read as a hard selection.
+  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",
+    inactive: "polli:bg-transparent polli:text-theme-text-base polli:hover:bg-theme-bg-hover polli:hover:text-theme-text-hover"
+  }
+};
+function TabButton({
+  as,
+  active,
+  onClick,
+  children,
+  size = "md",
+  variant = "soft",
+  intent,
+  ariaLabel,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const colors = variantClasses[intent === "neutral" ? "soft" : variant];
+  const handleClick = disabled ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  return /* @__PURE__ */ jsx4(
+    Component,
+    {
+      ...rest,
+      ...isButton ? { type: "button", disabled } : {},
+      ...!isButton && disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+      ...Component === "a" && disabled ? { href: void 0 } : {},
+      onClick: handleClick,
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      ...isButton ? { "aria-pressed": active } : { "aria-current": active ? "page" : void 0 },
+      className: cn(
+        tabButtonBaseClass,
+        variantClasses[variant].base,
+        active ? colors.active : colors.inactive,
+        disabled && "polli:pointer-events-none polli:cursor-not-allowed polli:opacity-50",
+        tabButtonSizeClass[size],
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/modules/gen/ModalityTab.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ModalityTab({
+  active,
+  onClick,
+  children,
+  size = "md",
+  disabled = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx5(
+    TabButton,
+    {
+      ...rest,
+      active,
+      onClick,
+      size,
+      disabled,
+      className,
+      children
+    }
+  );
+}
+
+// src/primitives/icons/index.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var strokeProps = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function CardIcon(props) {
+  return /* @__PURE__ */ jsxs("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: [
+    /* @__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" }),
+    /* @__PURE__ */ jsx6("path", { d: "M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z" })
+  ] });
+}
+
+// src/modules/gen/ModelAccessIcon.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ModelAccessIcon({
+  paidOnly = false,
+  className = "polli:h-3.5 polli:w-3.5"
+}) {
+  const label = paidOnly ? "Paid Pollen required" : "Works with any Pollen";
+  const Icon = paidOnly ? CardIcon : SproutIcon;
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      role: "img",
+      "aria-label": label,
+      title: label,
+      className: "polli:inline-flex polli:shrink-0",
+      children: /* @__PURE__ */ jsx7(Icon, { className })
+    }
+  );
+}
+
+// src/primitives/Button.tsx
+import { jsx as jsx8, jsxs as jsxs2 } 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"
+};
+var raisedSizes = {
+  icon: "polli:h-12 polli:w-12 polli:p-0",
+  xs: "polli:px-2 polli:py-1 polli:text-xs",
+  sm: "polli:px-4 polli:py-2 polli:text-sm",
+  md: "polli:px-7 polli:py-3.5 polli:text-base",
+  lg: "polli:px-8 polli:py-4 polli:text-lg"
+};
+var appearanceClasses = {
+  pill: "polli:rounded-full",
+  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`,
+  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",
+  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"
+};
+var buttonClasses = ({
+  intent,
+  appearance = "pill",
+  size,
+  className,
+  disabled
+}) => {
+  const colorClasses = intent ? intentClasses2[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",
+    colorClasses,
+    appearanceClasses[appearance],
+    sizeClasses[size || "md"],
+    className
+  );
+};
+function Button({
+  as,
+  children,
+  icon,
+  intent,
+  appearance,
+  size,
+  className,
+  disabled,
+  ...buttonProps
+}) {
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const isAnchor = Component === "a";
+  const buttonType = buttonProps.type;
+  const onClick = buttonProps.onClick;
+  const handleClick = disabled ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      ...buttonProps,
+      "data-intent": intent,
+      ...isButton ? { type: buttonType ?? "button", disabled } : {},
+      ...!isButton && disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+      ...isAnchor && disabled ? { href: void 0 } : {},
+      onClick: handleClick,
+      className: buttonClasses({
+        intent,
+        appearance,
+        size,
+        className,
+        disabled
+      }),
+      children: [
+        icon && /* @__PURE__ */ jsx8(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "polli:mr-2 polli:flex polli:size-4 polli:shrink-0 polli:[&>svg]:size-full",
+            children: icon
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/primitives/ChevronIcon.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx9(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    className: cn(
+      "polli:shrink-0 polli:transition-transform polli:duration-200 polli:ease-out",
+      expanded && "polli:rotate-180",
+      className
+    ),
+    children: /* @__PURE__ */ jsx9(
+      "path",
+      {
+        d: "M3 4.5 6 7.5l3-3",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+// src/primitives/Dropdown.tsx
+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";
+var DEFAULT_PANEL = "polli:rounded-lg polli:bg-surface-menu polli:shadow-lg";
+var Dropdown = ({
+  trigger,
+  children,
+  align = "start",
+  side = "bottom",
+  open: openProp,
+  portalled = true,
+  onOpenChange,
+  className,
+  panelStyle
+}) => {
+  const triggerId = useId();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs3(
+    Popover.Root,
+    {
+      ids: { trigger: triggerId },
+      open,
+      portalled,
+      onOpenChange: (details) => setOpen(details.open),
+      positioning: {
+        placement: `${side}-${align}`,
+        strategy: portalled ? "absolute" : "fixed"
+      },
+      children: [
+        /* @__PURE__ */ jsx10(Popover.Trigger, { asChild: true, children: trigger(open) }),
+        /* @__PURE__ */ jsx10(Portal, { disabled: !portalled, children: /* @__PURE__ */ jsx10(Popover.Positioner, { children: /* @__PURE__ */ jsx10(
+          Popover.Content,
+          {
+            "aria-labelledby": triggerId,
+            style: panelStyle,
+            className: cn(
+              "polli:z-[120] polli:overflow-hidden polli:focus:outline-none",
+              DEFAULT_PANEL,
+              className
+            ),
+            children: typeof children === "function" ? children(() => setOpen(false)) : children
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
+// src/primitives/ScrollArea.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef
+} from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var axisClasses = {
+  y: "polli:overflow-y-auto polli:overflow-x-hidden",
+  x: "polli:overflow-x-auto polli:overflow-y-hidden",
+  both: "polli:overflow-auto"
+};
+function assignRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var ScrollArea = forwardRef(
+  ({ axis = "y", scrollbar = "subtle", className, children, ...rest }, externalRef) => {
+    const innerRef = useRef(null);
+    const setRef = useCallback(
+      (node) => {
+        innerRef.current = node;
+        assignRef(externalRef, node);
+      },
+      [externalRef]
+    );
+    useEffect(() => {
+      if (scrollbar === "native") return;
+      const element = innerRef.current;
+      if (!element) return;
+      let hideTimer = null;
+      const clearHideTimer = () => {
+        if (hideTimer !== null) {
+          window.clearTimeout(hideTimer);
+          hideTimer = null;
+        }
+      };
+      const show = () => {
+        element.dataset.scrollbarActive = "true";
+        clearHideTimer();
+      };
+      const hide = () => {
+        element.dataset.scrollbarActive = "false";
+        clearHideTimer();
+      };
+      const scheduleHide = () => {
+        clearHideTimer();
+        hideTimer = window.setTimeout(hide, 2e3);
+      };
+      const handleInteraction = () => {
+        show();
+        scheduleHide();
+      };
+      hide();
+      element.addEventListener("scroll", handleInteraction, {
+        passive: true
+      });
+      element.addEventListener("wheel", handleInteraction, {
+        passive: true
+      });
+      element.addEventListener("touchstart", handleInteraction, {
+        passive: true
+      });
+      element.addEventListener("pointerdown", handleInteraction);
+      element.addEventListener("keydown", handleInteraction);
+      element.addEventListener("focusin", handleInteraction);
+      element.addEventListener("focusout", scheduleHide);
+      return () => {
+        clearHideTimer();
+        element.removeEventListener("scroll", handleInteraction);
+        element.removeEventListener("wheel", handleInteraction);
+        element.removeEventListener("touchstart", handleInteraction);
+        element.removeEventListener("pointerdown", handleInteraction);
+        element.removeEventListener("keydown", handleInteraction);
+        element.removeEventListener("focusin", handleInteraction);
+        element.removeEventListener("focusout", scheduleHide);
+      };
+    }, [scrollbar]);
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: cn(
+          scrollbar === "subtle" && "polli-scrollbar-subtle",
+          "polli:min-w-0 polli:max-w-full",
+          axisClasses[axis],
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+
+// src/modules/gen/ModelSelector.tsx
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var CATEGORY_LABELS = {
+  image: "Image",
+  video: "Video",
+  text: "Text",
+  audio: "Audio",
+  "3d": "3D",
+  embedding: "Embeddings",
+  realtime: "Realtime"
+};
+function categoryLabel(category) {
+  return CATEGORY_LABELS[category];
+}
+function modelId(model) {
+  return model.id ?? model.name;
+}
+function ModelSelector({
+  models,
+  category,
+  value,
+  isLoading = false,
+  onChange
+}) {
+  const filteredModels = models.filter((model) => model.category === category).sort((a, b) => modelId(a).localeCompare(modelId(b)));
+  const currentModel = models.find((model) => modelId(model) === value);
+  const modelLabel = currentModel ? currentModel.title ?? currentModel.name : "Select";
+  const accessibleLabel = currentModel ? `${CATEGORY_LABELS[category]} model: ${modelLabel}` : `Select ${CATEGORY_LABELS[category].toLowerCase()} model`;
+  return /* @__PURE__ */ jsx12(
+    Dropdown,
+    {
+      align: "start",
+      className: "polli:w-[min(24rem,calc(100vw-2rem))] polli:p-2",
+      trigger: (open) => /* @__PURE__ */ jsxs4(
+        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__ */ jsx12("span", { className: "polli:truncate", children: modelLabel }),
+              currentModel && /* @__PURE__ */ jsx12(
+                ModelAccessIcon,
+                {
+                  paidOnly: currentModel.paid_only
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx12(ChevronIcon, { expanded: open })
+          ]
+        }
+      ),
+      children: (close) => isLoading ? /* @__PURE__ */ jsx12("p", { className: "polli:m-0 polli:px-2 polli:py-2 polli:text-sm polli:text-theme-text-soft", children: "Loading models..." }) : /* @__PURE__ */ jsx12(ScrollArea, { className: "polli:max-h-80 polli:pr-2", children: /* @__PURE__ */ jsx12("div", { className: "polli:flex polli:flex-col polli:gap-1", children: filteredModels.map((model) => {
+        const id = modelId(model);
+        const isActive = value === id;
+        return /* @__PURE__ */ jsx12(
+          TabButton,
+          {
+            active: isActive,
+            size: "sm",
+            variant: "ghost",
+            className: "polli:w-full polli:justify-start polli:text-left",
+            onClick: () => {
+              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: [
+                /* @__PURE__ */ jsx12("span", { className: "polli:truncate", children: model.title ?? model.name }),
+                /* @__PURE__ */ jsx12(
+                  ModelAccessIcon,
+                  {
+                    paidOnly: model.paid_only
+                  }
+                )
+              ] }),
+              model.description && /* @__PURE__ */ jsx12("span", { className: "polli:truncate polli:text-xs polli:font-normal polli:text-theme-text-muted", children: model.description })
+            ] })
+          },
+          id
+        );
+      }) }) })
+    }
+  );
+}
+export {
+  ModalityChip,
+  ModalityDot,
+  ModalityTab,
+  ModelAccessIcon,
+  ModelSelector,
+  categoryLabel,
+  getModalityKey
+};
+//# sourceMappingURL=index.js.map