@fairfox/polly 0.88.1 → 0.89.0

package/dist/src/polly-ui/index.js

@@ -1,76 +1,3 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  if (mod && typeof mod === "object" || typeof mod === "function") {
-    for (let key of __getOwnPropNames(mod))
-      if (!__hasOwnProp.call(to, key))
-        __defProp(to, key, {
-          get: __accessProp.bind(mod, key),
-          enumerable: true
-        });
-  }
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
 // src/polly-ui/ActionForm.module.css
 var ActionForm_module_default = {
   form: "form_oqTahQ"
@@ -321,6 +248,10 @@ function Layout(props) {
     className,
     onClick,
     onKeyDown,
+    onKeyUp,
+    onMouseEnter,
+    onMouseLeave,
+    elementRef,
     role,
     tabIndex,
     id
@@ -385,6 +316,10 @@ function Layout(props) {
     style,
     onClick,
     onKeyDown,
+    onKeyUp,
+    onMouseEnter,
+    onMouseLeave,
+    ref: elementRef,
     role,
     tabIndex,
     "aria-label": props["aria-label"],
@@ -435,11 +370,11 @@ function Dropdown(props) {
   }, [popoverId, isOpen]);
   useEffect2(() => {
     const menu = menuRef.current;
-    const trigger2 = triggerRef.current;
-    if (!menu || !trigger2)
+    const trigger = triggerRef.current;
+    if (!menu || !trigger)
       return;
     const positionMenu = () => {
-      const t = trigger2.getBoundingClientRect();
+      const t = trigger.getBoundingClientRect();
       const prevDisplay = menu.style.display;
       menu.style.maxHeight = "";
       menu.style.display = "block";
@@ -448,7 +383,7 @@ function Dropdown(props) {
       menu.style.display = prevDisplay;
       const viewportWidth = document.documentElement.clientWidth;
       const viewportHeight = document.documentElement.clientHeight;
-      const isRtl = getComputedStyle(trigger2).direction === "rtl" || document.documentElement.dir === "rtl";
+      const isRtl = getComputedStyle(trigger).direction === "rtl" || document.documentElement.dir === "rtl";
       const physicalRight = isRtl && align === "left" || align === "right";
       let left = physicalRight ? t.right - menuWidth : t.left;
       const maxLeft = Math.max(VIEWPORT_PADDING, viewportWidth - menuWidth - VIEWPORT_PADDING);
@@ -718,13 +653,14 @@ var Button_module_default = {
   btnLarge: "btnLarge_c4HKfA",
   btnCircle: "btnCircle_c4HKfA",
   btnFullWidth: "btnFullWidth_c4HKfA",
+  btnFlush: "btnFlush_c4HKfA",
   btnBounded: "btnBounded_c4HKfA",
   icon: "icon_c4HKfA",
   label: "label_c4HKfA"
 };
 
 // src/polly-ui/Button.tsx
-import { jsxDEV as jsxDEV6, Fragment as Fragment2 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
 function tierClass(tier) {
   if (tier === "primary")
     return Button_module_default["tierPrimary"];
@@ -760,6 +696,7 @@ function Button(props) {
     fullWidth = false,
     circle = false,
     bounded = false,
+    flush = false,
     className,
     title,
     icon,
@@ -781,12 +718,18 @@ function Button(props) {
     parts.push(Button_module_default["btnFullWidth"] ?? "");
   if (bounded)
     parts.push(Button_module_default["btnBounded"] ?? "");
+  if (flush)
+    parts.push(Button_module_default["btnFlush"] ?? "");
   if (className)
     parts.push(className);
   const buttonClass = parts.filter(Boolean).join(" ");
-  const content = /* @__PURE__ */ jsxDEV6(Fragment2, {
+  const content = icon === undefined ? label : /* @__PURE__ */ jsxDEV6(Layout, {
+    inline: true,
+    columns: "auto auto",
+    gap: "var(--polly-space-sm)",
+    alignItems: "center",
     children: [
-      icon !== undefined && /* @__PURE__ */ jsxDEV6("span", {
+      /* @__PURE__ */ jsxDEV6("span", {
         class: Button_module_default["icon"],
         children: icon
       }, undefined, false, undefined, this),
@@ -871,6 +814,7 @@ var variantDefaults = {
     border: "default"
   },
   bubble: {
+    background: "var(--polly-surface-bubble)",
     radius: "md",
     border: "default",
     padding: "var(--polly-space-sm) var(--polly-space-md)"
@@ -1133,8 +1077,13 @@ function Checkbox(props) {
     parts.push(Checkbox_module_default["disabled"] ?? "");
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV8("label", {
-    class: parts.filter(Boolean).join(" "),
+  return /* @__PURE__ */ jsxDEV8(Layout, {
+    as: "label",
+    inline: true,
+    columns: "auto auto",
+    gap: "var(--polly-space-sm)",
+    alignItems: "center",
+    className: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-checkbox": true,
     children: [
@@ -1204,13 +1153,13 @@ function Code(props) {
   const { children, block, className, id } = props;
   const passthrough = collectPassthrough(props);
   if (block) {
-    const parts2 = [Code_module_default["block"]];
+    const parts = [Code_module_default["block"]];
     if (className)
-      parts2.push(className);
+      parts.push(className);
     return /* @__PURE__ */ jsxDEV9("pre", {
       ...passthrough,
       id,
-      class: parts2.filter(Boolean).join(" "),
+      class: parts.filter(Boolean).join(" "),
       "data-polly-ui": true,
       "data-polly-code": "block",
       children: /* @__PURE__ */ jsxDEV9("code", {
@@ -1234,6 +1183,8 @@ function Code(props) {
 var Collapsible_module_default = {
   collapsible: "collapsible_sEhnPw",
   summary: "summary_sEhnPw",
+  marker: "marker_sEhnPw",
+  summaryContent: "summaryContent_sEhnPw",
   content: "content_sEhnPw"
 };
 
@@ -1281,11 +1232,24 @@ function Collapsible(props) {
     "data-polly-ui": true,
     "data-polly-collapsible": true,
     children: [
-      /* @__PURE__ */ jsxDEV10("summary", {
-        class: Collapsible_module_default["summary"],
+      /* @__PURE__ */ jsxDEV10(Layout, {
+        as: "summary",
+        columns: "auto 1fr",
+        gap: "var(--polly-space-sm)",
+        alignItems: "center",
+        className: Collapsible_module_default["summary"],
         onKeyUp: handleSummaryKeyUp,
-        children: summary
-      }, undefined, false, undefined, this),
+        children: [
+          /* @__PURE__ */ jsxDEV10("span", {
+            class: Collapsible_module_default["marker"],
+            "aria-hidden": "true"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10("span", {
+            class: Collapsible_module_default["summaryContent"],
+            children: summary
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV10("div", {
         class: Collapsible_module_default["content"],
         children
@@ -1531,9 +1495,12 @@ function Root2({ when, onClose, children, "aria-label": ariaLabel }) {
   const ctx = { id, titleId, descId, close };
   const content = /* @__PURE__ */ jsxDEV12(Ctx.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxDEV12("div", {
-      ref: mountRef,
-      class: Modal_module_default["container"],
+    children: /* @__PURE__ */ jsxDEV12(Layout, {
+      elementRef: mountRef,
+      alignItems: "center",
+      justifyItems: "center",
+      height: "100%",
+      className: Modal_module_default["container"],
       "data-polly-ui": true,
       "data-polly-modal-content": true,
       "data-overlay-id": id,
@@ -1684,8 +1651,11 @@ function Host() {
             children: current.body
           }, undefined, false, undefined, this) : null,
           /* @__PURE__ */ jsxDEV13(Modal.Footer, {
-            children: /* @__PURE__ */ jsxDEV13("div", {
-              class: ConfirmDialog_module_default["actions"],
+            children: /* @__PURE__ */ jsxDEV13(Layout, {
+              columns: "auto auto",
+              gap: "var(--polly-space-sm)",
+              justifyContent: "end",
+              className: ConfirmDialog_module_default["actions"],
               "data-polly-confirm-actions": true,
               children: [
                 /* @__PURE__ */ jsxDEV13("button", {
@@ -1824,7 +1794,7 @@ function Output(props) {
 }
 // src/polly-ui/Select.tsx
 import { useComputed, useSignal as useSignal2 } from "@preact/signals";
-import { jsxDEV as jsxDEV17, Fragment as Fragment3 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17 } from "preact/jsx-dev-runtime";
 var MULTI_SELECT_LABEL_THRESHOLD = 2;
 function formatSelected(options, selected, multiSelect) {
   if (selected.size === 0)
@@ -1852,7 +1822,7 @@ function Select(props) {
     className,
     id
   } = props;
-  const isOpen2 = useSignal2(false);
+  const isOpen = useSignal2(false);
   const displayText = useComputed(() => {
     const text = formatSelected(options, selected.value, multiSelect);
     return text.length > 0 ? text : placeholder;
@@ -1868,7 +1838,7 @@ function Select(props) {
       selected.value = next;
     } else {
       selected.value = new Set([value]);
-      isOpen2.value = false;
+      isOpen.value = false;
     }
   };
   const handleSelectAll = () => {
@@ -1879,7 +1849,7 @@ function Select(props) {
   };
   const handleClearOption = () => {
     selected.value = new Set;
-    isOpen2.value = false;
+    isOpen.value = false;
   };
   const triggerParts = [Select_module_default["trigger"] ?? ""];
   if (isEmpty.value)
@@ -1887,10 +1857,16 @@ function Select(props) {
   if (wide)
     triggerParts.push(Select_module_default["triggerWide"] ?? "");
   const triggerClass = triggerParts.filter(Boolean).join(" ");
-  const triggerContent = /* @__PURE__ */ jsxDEV17(Fragment3, {
+  const triggerContent = /* @__PURE__ */ jsxDEV17(Layout, {
+    inline: true,
+    columns: "1fr auto",
+    gap: "var(--polly-space-sm)",
+    alignItems: "center",
+    maxInlineSize: "100%",
     children: [
       /* @__PURE__ */ jsxDEV17("span", {
         class: Select_module_default["triggerLabel"],
+        "data-polly-select-label": true,
         children: displayText.value
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV17("span", {
@@ -1913,7 +1889,7 @@ function Select(props) {
         children: label
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV17(Dropdown, {
-        isOpen: isOpen2,
+        isOpen,
         trigger: triggerContent,
         triggerClassName: triggerClass,
         triggerDisabled: disabled,
@@ -2218,8 +2194,9 @@ function TextInput(props) {
   }, undefined, false, undefined, this);
   if (!hasError)
     return control;
-  return /* @__PURE__ */ jsxDEV20("div", {
-    class: TextInput_module_default["field"],
+  return /* @__PURE__ */ jsxDEV20(Layout, {
+    gap: "var(--polly-space-xs)",
+    className: TextInput_module_default["field"],
     "data-polly-ui": true,
     "data-polly-field": true,
     children: [
@@ -2299,8 +2276,9 @@ function Viewport(props) {
   }, [paused, entries, autoDismissMs]);
   if (!portalNode)
     return null;
-  const content = /* @__PURE__ */ jsxDEV21("div", {
-    class: `${Toast_module_default["viewport"]} ${props.className ?? ""}`.trim(),
+  const content = /* @__PURE__ */ jsxDEV21(Layout, {
+    gap: "var(--polly-space-sm)",
+    className: `${Toast_module_default["viewport"]} ${props.className ?? ""}`.trim(),
     "data-polly-ui": true,
     "data-polly-toast-viewport": true,
     onMouseEnter: () => setPaused(true),
@@ -2322,23 +2300,28 @@ function ToastItem({ entry }) {
     "data-severity": entry.severity,
     role: entry.severity === "error" ? "alert" : "status",
     "aria-live": liveness,
-    children: [
-      /* @__PURE__ */ jsxDEV21("span", {
-        class: Toast_module_default["message"],
-        children: entry.message
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV21("button", {
-        type: "button",
-        class: Toast_module_default["close"],
-        "data-polly-ui": true,
-        "data-polly-interactive": true,
-        "data-polly-toast-close": true,
-        onClick: () => clearError(entry.id),
-        "aria-label": "Dismiss",
-        children: "×"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+    children: /* @__PURE__ */ jsxDEV21(Layout, {
+      columns: "1fr auto",
+      gap: "var(--polly-space-md)",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsxDEV21("span", {
+          class: Toast_module_default["message"],
+          children: entry.message
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV21("button", {
+          type: "button",
+          class: Toast_module_default["close"],
+          "data-polly-ui": true,
+          "data-polly-interactive": true,
+          "data-polly-toast-close": true,
+          onClick: () => clearError(entry.id),
+          "aria-label": "Dismiss",
+          children: "×"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 var Toast = { Viewport };
 // src/polly-ui/Toggle.module.css
@@ -2362,8 +2345,13 @@ function Toggle(props) {
     parts.push(Toggle_module_default["disabled"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV22("label", {
-    class: parts.join(" "),
+  return /* @__PURE__ */ jsxDEV22(Layout, {
+    as: "label",
+    inline: true,
+    columns: "auto auto",
+    gap: "var(--polly-space-sm)",
+    alignItems: "center",
+    className: parts.join(" "),
     "data-polly-ui": true,
     "data-polly-toggle": true,
     children: [
@@ -2422,4 +2410,4 @@ export {
   getOverlayRootNode
 };
 
-//# debugId=658A56B7B40F7FD364756E2164756E21
+//# debugId=E3BB994F404F3CB764756E2164756E21