@pollinations/ui 0.0.1

package/dist/modality/index.cjs

@@ -0,0 +1,115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/modality/index.ts
+var modality_exports = {};
+__export(modality_exports, {
+  ModalityButton: () => ModalityButton,
+  getModalityColors: () => getModalityColors
+});
+module.exports = __toCommonJS(modality_exports);
+
+// src/modules/modality/colors.ts
+var MODALITY_COLORS = {
+  text: {
+    filled: "polli:bg-blue-200 polli:text-blue-900",
+    hover: "polli:hover:bg-blue-100 polli:hover:text-blue-900",
+    text: "polli:text-blue-800"
+  },
+  image: {
+    filled: "polli:bg-pink-200 polli:text-pink-900",
+    hover: "polli:hover:bg-pink-100 polli:hover:text-pink-900",
+    text: "polli:text-pink-800"
+  },
+  video: {
+    filled: "polli:bg-teal-200 polli:text-teal-900",
+    hover: "polli:hover:bg-teal-100 polli:hover:text-teal-900",
+    text: "polli:text-teal-800"
+  },
+  audio: {
+    filled: "polli:bg-violet-200 polli:text-violet-900",
+    hover: "polli:hover:bg-violet-100 polli:hover:text-violet-900",
+    text: "polli:text-violet-800"
+  },
+  realtime: {
+    filled: "polli:bg-green-200 polli:text-green-900",
+    hover: "polli:hover:bg-green-100 polli:hover:text-green-900",
+    text: "polli:text-green-800"
+  },
+  embedding: {
+    filled: "polli:bg-amber-200 polli:text-amber-900",
+    hover: "polli:hover:bg-amber-100 polli:hover:text-amber-900",
+    text: "polli:text-amber-800"
+  }
+};
+function normalize(category) {
+  const lower = category.toLowerCase();
+  if (lower === "images") return "image";
+  if (lower === "embeddings") return "embedding";
+  if (lower === "text" || lower === "image" || lower === "video" || lower === "audio" || lower === "realtime" || lower === "embedding") {
+    return lower;
+  }
+  return null;
+}
+function getModalityColors(category) {
+  const key = normalize(category);
+  return key ? MODALITY_COLORS[key] : null;
+}
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({ prefix: "polli" });
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(...inputs));
+}
+
+// src/modules/modality/ModalityButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModalityButton = ({
+  category,
+  selected = true,
+  onClick,
+  disabled,
+  children
+}) => {
+  const colors = getModalityColors(category ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-pressed": selected,
+      className: cn(
+        "polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors",
+        selected ? colors?.filled ?? "polli:bg-gray-200 polli:text-gray-900" : "polli:bg-gray-100 polli:text-gray-600",
+        !disabled && !selected && colors?.hover,
+        disabled ? "polli:cursor-not-allowed polli:opacity-50" : "polli:cursor-pointer"
+      ),
+      children
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalityButton,
+  getModalityColors
+});
+//# sourceMappingURL=index.cjs.map

package/dist/modality/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/modules/modality/index.ts","../../src/modules/modality/colors.ts","../../src/lib/cn.ts","../../src/modules/modality/ModalityButton.tsx"],"sourcesContent":["export {\n    getModalityColors,\n    type Modality,\n    type ModalityColorSet,\n} from \"./colors.ts\";\nexport { ModalityButton, type ModalityButtonProps } from \"./ModalityButton.tsx\";\n","/**\n * Single source of truth for modality colors.\n *\n * Each modality (text/image/video/audio/realtime/embedding) gets one\n * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.\n * Used in two places:\n *   1. The model-selection buttons in the API key creation flow.\n *   2. The static modality chips on the OAuth authorize screen.\n *\n * Interactive selection (model-picker) renders as `rounded-full` pills\n * aligned to the canonical Button. Static display (authorize summary)\n * renders as `rounded-lg` chips. Page-theme hues only — no rogue\n * indigo/rose.\n */\nexport type Modality =\n    | \"text\"\n    | \"image\"\n    | \"video\"\n    | \"audio\"\n    | \"realtime\"\n    | \"embedding\";\n\nexport type ModalityColorSet = {\n    /** Selected/filled state: `bg + text + border` classes. */\n    filled: string;\n    /** Hover hint shown on the unselected button (subtle tint). */\n    hover: string;\n    /** Heading text colour for the category label. */\n    text: string;\n};\n\n// No borders — chips and buttons in this system are borderless.\nexport const MODALITY_COLORS: Record<Modality, ModalityColorSet> = {\n    text: {\n        filled: \"polli:bg-blue-200 polli:text-blue-900\",\n        hover: \"polli:hover:bg-blue-100 polli:hover:text-blue-900\",\n        text: \"polli:text-blue-800\",\n    },\n    image: {\n        filled: \"polli:bg-pink-200 polli:text-pink-900\",\n        hover: \"polli:hover:bg-pink-100 polli:hover:text-pink-900\",\n        text: \"polli:text-pink-800\",\n    },\n    video: {\n        filled: \"polli:bg-teal-200 polli:text-teal-900\",\n        hover: \"polli:hover:bg-teal-100 polli:hover:text-teal-900\",\n        text: \"polli:text-teal-800\",\n    },\n    audio: {\n        filled: \"polli:bg-violet-200 polli:text-violet-900\",\n        hover: \"polli:hover:bg-violet-100 polli:hover:text-violet-900\",\n        text: \"polli:text-violet-800\",\n    },\n    realtime: {\n        filled: \"polli:bg-green-200 polli:text-green-900\",\n        hover: \"polli:hover:bg-green-100 polli:hover:text-green-900\",\n        text: \"polli:text-green-800\",\n    },\n    embedding: {\n        filled: \"polli:bg-amber-200 polli:text-amber-900\",\n        hover: \"polli:hover:bg-amber-100 polli:hover:text-amber-900\",\n        text: \"polli:text-amber-800\",\n    },\n};\n\n/** Map any human-typed category string to the canonical `Modality` key. */\nfunction normalize(category: string): Modality | null {\n    const lower = category.toLowerCase();\n    if (lower === \"images\") return \"image\";\n    if (lower === \"embeddings\") return \"embedding\";\n    if (\n        lower === \"text\" ||\n        lower === \"image\" ||\n        lower === \"video\" ||\n        lower === \"audio\" ||\n        lower === \"realtime\" ||\n        lower === \"embedding\"\n    ) {\n        return lower;\n    }\n    return null;\n}\n\nexport function getModalityColors(category: string): ModalityColorSet | null {\n    const key = normalize(category);\n    return key ? MODALITY_COLORS[key] : null;\n}\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 { FC, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.ts\";\nimport { getModalityColors } from \"./colors.ts\";\n\nexport type ModalityButtonProps = {\n    /** Modality key or category string (\"Text\", \"Images\", etc). */\n    category?: string;\n    /** Filled (modality hue) when true, muted gray when false. */\n    selected?: boolean;\n    onClick?: () => void;\n    disabled?: boolean;\n    children: ReactNode;\n};\n\n/**\n * Rounded-full pill button colored by modality. Single source of truth\n * for every interactive modality affordance — model picker, design\n * showcase, etc. Shape and recipe live here; consumers only supply\n * content + state.\n */\nexport const ModalityButton: FC<ModalityButtonProps> = ({\n    category,\n    selected = true,\n    onClick,\n    disabled,\n    children,\n}) => {\n    const colors = getModalityColors(category ?? \"\");\n    return (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            disabled={disabled}\n            aria-pressed={selected}\n            className={cn(\n                \"polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors\",\n                selected\n                    ? (colors?.filled ??\n                          \"polli:bg-gray-200 polli:text-gray-900\")\n                    : \"polli:bg-gray-100 polli:text-gray-600\",\n                !disabled && !selected && colors?.hover,\n                disabled\n                    ? \"polli:cursor-not-allowed polli:opacity-50\"\n                    : \"polli:cursor-pointer\",\n            )}\n        >\n            {children}\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACgCO,IAAM,kBAAsD;AAAA,EAC/D,MAAM;AAAA,IACF,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AACJ;AAGA,SAAS,UAAU,UAAmC;AAClD,QAAM,QAAQ,SAAS,YAAY;AACnC,MAAI,UAAU,SAAU,QAAO;AAC/B,MAAI,UAAU,aAAc,QAAO;AACnC,MACI,UAAU,UACV,UAAU,WACV,UAAU,WACV,UAAU,WACV,UAAU,cACV,UAAU,aACZ;AACE,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAEO,SAAS,kBAAkB,UAA2C;AACzE,QAAM,MAAM,UAAU,QAAQ;AAC9B,SAAO,MAAM,gBAAgB,GAAG,IAAI;AACxC;;;ACtFA,kBAAqB;AACrB,4BAAoC;AAEpC,IAAM,cAAU,2CAAoB,EAAE,QAAQ,QAAQ,CAAC;AAGhD,SAAS,MAAM,QAA+C;AACjE,SAAO,YAAQ,kBAAK,GAAG,MAAM,CAAC;AAClC;;;ACqBQ;AATD,IAAM,iBAA0C,CAAC;AAAA,EACpD;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,SAAS,kBAAkB,YAAY,EAAE;AAC/C,SACI;AAAA,IAAC;AAAA;AAAA,MACG,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,WAAW;AAAA,QACP;AAAA,QACA,WACO,QAAQ,UACL,0CACJ;AAAA,QACN,CAAC,YAAY,CAAC,YAAY,QAAQ;AAAA,QAClC,WACM,8CACA;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACL;AAER;","names":[]}

package/dist/modality/index.d.cts

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+
+/**
+ * Single source of truth for modality colors.
+ *
+ * Each modality (text/image/video/audio/realtime/embedding) gets one
+ * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.
+ * Used in two places:
+ *   1. The model-selection buttons in the API key creation flow.
+ *   2. The static modality chips on the OAuth authorize screen.
+ *
+ * Interactive selection (model-picker) renders as `rounded-full` pills
+ * aligned to the canonical Button. Static display (authorize summary)
+ * renders as `rounded-lg` chips. Page-theme hues only — no rogue
+ * indigo/rose.
+ */
+type Modality = "text" | "image" | "video" | "audio" | "realtime" | "embedding";
+type ModalityColorSet = {
+    /** Selected/filled state: `bg + text + border` classes. */
+    filled: string;
+    /** Hover hint shown on the unselected button (subtle tint). */
+    hover: string;
+    /** Heading text colour for the category label. */
+    text: string;
+};
+declare function getModalityColors(category: string): ModalityColorSet | null;
+
+type ModalityButtonProps = {
+    /** Modality key or category string ("Text", "Images", etc). */
+    category?: string;
+    /** Filled (modality hue) when true, muted gray when false. */
+    selected?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+};
+/**
+ * Rounded-full pill button colored by modality. Single source of truth
+ * for every interactive modality affordance — model picker, design
+ * showcase, etc. Shape and recipe live here; consumers only supply
+ * content + state.
+ */
+declare const ModalityButton: FC<ModalityButtonProps>;
+
+export { type Modality, ModalityButton, type ModalityButtonProps, type ModalityColorSet, getModalityColors };

package/dist/modality/index.d.ts

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+
+/**
+ * Single source of truth for modality colors.
+ *
+ * Each modality (text/image/video/audio/realtime/embedding) gets one
+ * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.
+ * Used in two places:
+ *   1. The model-selection buttons in the API key creation flow.
+ *   2. The static modality chips on the OAuth authorize screen.
+ *
+ * Interactive selection (model-picker) renders as `rounded-full` pills
+ * aligned to the canonical Button. Static display (authorize summary)
+ * renders as `rounded-lg` chips. Page-theme hues only — no rogue
+ * indigo/rose.
+ */
+type Modality = "text" | "image" | "video" | "audio" | "realtime" | "embedding";
+type ModalityColorSet = {
+    /** Selected/filled state: `bg + text + border` classes. */
+    filled: string;
+    /** Hover hint shown on the unselected button (subtle tint). */
+    hover: string;
+    /** Heading text colour for the category label. */
+    text: string;
+};
+declare function getModalityColors(category: string): ModalityColorSet | null;
+
+type ModalityButtonProps = {
+    /** Modality key or category string ("Text", "Images", etc). */
+    category?: string;
+    /** Filled (modality hue) when true, muted gray when false. */
+    selected?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+};
+/**
+ * Rounded-full pill button colored by modality. Single source of truth
+ * for every interactive modality affordance — model picker, design
+ * showcase, etc. Shape and recipe live here; consumers only supply
+ * content + state.
+ */
+declare const ModalityButton: FC<ModalityButtonProps>;
+
+export { type Modality, ModalityButton, type ModalityButtonProps, type ModalityColorSet, getModalityColors };

package/dist/modality/index.js

@@ -0,0 +1,87 @@
+// src/modules/modality/colors.ts
+var MODALITY_COLORS = {
+  text: {
+    filled: "polli:bg-blue-200 polli:text-blue-900",
+    hover: "polli:hover:bg-blue-100 polli:hover:text-blue-900",
+    text: "polli:text-blue-800"
+  },
+  image: {
+    filled: "polli:bg-pink-200 polli:text-pink-900",
+    hover: "polli:hover:bg-pink-100 polli:hover:text-pink-900",
+    text: "polli:text-pink-800"
+  },
+  video: {
+    filled: "polli:bg-teal-200 polli:text-teal-900",
+    hover: "polli:hover:bg-teal-100 polli:hover:text-teal-900",
+    text: "polli:text-teal-800"
+  },
+  audio: {
+    filled: "polli:bg-violet-200 polli:text-violet-900",
+    hover: "polli:hover:bg-violet-100 polli:hover:text-violet-900",
+    text: "polli:text-violet-800"
+  },
+  realtime: {
+    filled: "polli:bg-green-200 polli:text-green-900",
+    hover: "polli:hover:bg-green-100 polli:hover:text-green-900",
+    text: "polli:text-green-800"
+  },
+  embedding: {
+    filled: "polli:bg-amber-200 polli:text-amber-900",
+    hover: "polli:hover:bg-amber-100 polli:hover:text-amber-900",
+    text: "polli:text-amber-800"
+  }
+};
+function normalize(category) {
+  const lower = category.toLowerCase();
+  if (lower === "images") return "image";
+  if (lower === "embeddings") return "embedding";
+  if (lower === "text" || lower === "image" || lower === "video" || lower === "audio" || lower === "realtime" || lower === "embedding") {
+    return lower;
+  }
+  return null;
+}
+function getModalityColors(category) {
+  const key = normalize(category);
+  return key ? MODALITY_COLORS[key] : null;
+}
+
+// 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/modules/modality/ModalityButton.tsx
+import { jsx } from "react/jsx-runtime";
+var ModalityButton = ({
+  category,
+  selected = true,
+  onClick,
+  disabled,
+  children
+}) => {
+  const colors = getModalityColors(category ?? "");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-pressed": selected,
+      className: cn(
+        "polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors",
+        selected ? colors?.filled ?? "polli:bg-gray-200 polli:text-gray-900" : "polli:bg-gray-100 polli:text-gray-600",
+        !disabled && !selected && colors?.hover,
+        disabled ? "polli:cursor-not-allowed polli:opacity-50" : "polli:cursor-pointer"
+      ),
+      children
+    }
+  );
+};
+export {
+  ModalityButton,
+  getModalityColors
+};
+//# sourceMappingURL=index.js.map

package/dist/modality/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/modules/modality/colors.ts","../../src/lib/cn.ts","../../src/modules/modality/ModalityButton.tsx"],"sourcesContent":["/**\n * Single source of truth for modality colors.\n *\n * Each modality (text/image/video/audio/realtime/embedding) gets one\n * page-theme hue, applied at the soft `-200/-900/-400` chip recipe.\n * Used in two places:\n *   1. The model-selection buttons in the API key creation flow.\n *   2. The static modality chips on the OAuth authorize screen.\n *\n * Interactive selection (model-picker) renders as `rounded-full` pills\n * aligned to the canonical Button. Static display (authorize summary)\n * renders as `rounded-lg` chips. Page-theme hues only — no rogue\n * indigo/rose.\n */\nexport type Modality =\n    | \"text\"\n    | \"image\"\n    | \"video\"\n    | \"audio\"\n    | \"realtime\"\n    | \"embedding\";\n\nexport type ModalityColorSet = {\n    /** Selected/filled state: `bg + text + border` classes. */\n    filled: string;\n    /** Hover hint shown on the unselected button (subtle tint). */\n    hover: string;\n    /** Heading text colour for the category label. */\n    text: string;\n};\n\n// No borders — chips and buttons in this system are borderless.\nexport const MODALITY_COLORS: Record<Modality, ModalityColorSet> = {\n    text: {\n        filled: \"polli:bg-blue-200 polli:text-blue-900\",\n        hover: \"polli:hover:bg-blue-100 polli:hover:text-blue-900\",\n        text: \"polli:text-blue-800\",\n    },\n    image: {\n        filled: \"polli:bg-pink-200 polli:text-pink-900\",\n        hover: \"polli:hover:bg-pink-100 polli:hover:text-pink-900\",\n        text: \"polli:text-pink-800\",\n    },\n    video: {\n        filled: \"polli:bg-teal-200 polli:text-teal-900\",\n        hover: \"polli:hover:bg-teal-100 polli:hover:text-teal-900\",\n        text: \"polli:text-teal-800\",\n    },\n    audio: {\n        filled: \"polli:bg-violet-200 polli:text-violet-900\",\n        hover: \"polli:hover:bg-violet-100 polli:hover:text-violet-900\",\n        text: \"polli:text-violet-800\",\n    },\n    realtime: {\n        filled: \"polli:bg-green-200 polli:text-green-900\",\n        hover: \"polli:hover:bg-green-100 polli:hover:text-green-900\",\n        text: \"polli:text-green-800\",\n    },\n    embedding: {\n        filled: \"polli:bg-amber-200 polli:text-amber-900\",\n        hover: \"polli:hover:bg-amber-100 polli:hover:text-amber-900\",\n        text: \"polli:text-amber-800\",\n    },\n};\n\n/** Map any human-typed category string to the canonical `Modality` key. */\nfunction normalize(category: string): Modality | null {\n    const lower = category.toLowerCase();\n    if (lower === \"images\") return \"image\";\n    if (lower === \"embeddings\") return \"embedding\";\n    if (\n        lower === \"text\" ||\n        lower === \"image\" ||\n        lower === \"video\" ||\n        lower === \"audio\" ||\n        lower === \"realtime\" ||\n        lower === \"embedding\"\n    ) {\n        return lower;\n    }\n    return null;\n}\n\nexport function getModalityColors(category: string): ModalityColorSet | null {\n    const key = normalize(category);\n    return key ? MODALITY_COLORS[key] : null;\n}\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 { FC, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.ts\";\nimport { getModalityColors } from \"./colors.ts\";\n\nexport type ModalityButtonProps = {\n    /** Modality key or category string (\"Text\", \"Images\", etc). */\n    category?: string;\n    /** Filled (modality hue) when true, muted gray when false. */\n    selected?: boolean;\n    onClick?: () => void;\n    disabled?: boolean;\n    children: ReactNode;\n};\n\n/**\n * Rounded-full pill button colored by modality. Single source of truth\n * for every interactive modality affordance — model picker, design\n * showcase, etc. Shape and recipe live here; consumers only supply\n * content + state.\n */\nexport const ModalityButton: FC<ModalityButtonProps> = ({\n    category,\n    selected = true,\n    onClick,\n    disabled,\n    children,\n}) => {\n    const colors = getModalityColors(category ?? \"\");\n    return (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            disabled={disabled}\n            aria-pressed={selected}\n            className={cn(\n                \"polli:inline-flex polli:shrink-0 polli:items-center polli:gap-1 polli:rounded-full polli:px-3 polli:py-1 polli:text-left polli:text-sm polli:font-medium polli:leading-normal polli:transition-colors\",\n                selected\n                    ? (colors?.filled ??\n                          \"polli:bg-gray-200 polli:text-gray-900\")\n                    : \"polli:bg-gray-100 polli:text-gray-600\",\n                !disabled && !selected && colors?.hover,\n                disabled\n                    ? \"polli:cursor-not-allowed polli:opacity-50\"\n                    : \"polli:cursor-pointer\",\n            )}\n        >\n            {children}\n        </button>\n    );\n};\n"],"mappings":";AAgCO,IAAM,kBAAsD;AAAA,EAC/D,MAAM;AAAA,IACF,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACH,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AACJ;AAGA,SAAS,UAAU,UAAmC;AAClD,QAAM,QAAQ,SAAS,YAAY;AACnC,MAAI,UAAU,SAAU,QAAO;AAC/B,MAAI,UAAU,aAAc,QAAO;AACnC,MACI,UAAU,UACV,UAAU,WACV,UAAU,WACV,UAAU,WACV,UAAU,cACV,UAAU,aACZ;AACE,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAEO,SAAS,kBAAkB,UAA2C;AACzE,QAAM,MAAM,UAAU,QAAQ;AAC9B,SAAO,MAAM,gBAAgB,GAAG,IAAI;AACxC;;;ACtFA,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB,EAAE,QAAQ,QAAQ,CAAC;AAGhD,SAAS,MAAM,QAA+C;AACjE,SAAO,QAAQ,KAAK,GAAG,MAAM,CAAC;AAClC;;;ACqBQ;AATD,IAAM,iBAA0C,CAAC;AAAA,EACpD;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,SAAS,kBAAkB,YAAY,EAAE;AAC/C,SACI;AAAA,IAAC;AAAA;AAAA,MACG,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,WAAW;AAAA,QACP;AAAA,QACA,WACO,QAAQ,UACL,0CACJ;AAAA,QACN,CAAC,YAAY,CAAC,YAAY,QAAQ;AAAA,QAClC,WACM,8CACA;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACL;AAER;","names":[]}