@fairfox/polly 0.74.1 → 0.75.1

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

@@ -124,10 +124,13 @@ function dispatchAction(action, data) {
 }
 
 // src/polly-ui/internal/passthrough.ts
+function isPassthroughKey(key) {
+  return key.startsWith("data-") || key.startsWith("aria-") || key === "title";
+}
 function collectPassthrough(props) {
   const out = {};
   for (const key of Object.keys(props)) {
-    if (!key.startsWith("data-") && !key.startsWith("aria-"))
+    if (!isPassthroughKey(key))
       continue;
     const value = props[key];
     if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
@@ -374,6 +377,7 @@ function Layout(props) {
   const baseClass = baseParts.filter(Boolean).join(" ");
   const combined = contents ? className : className ? `${baseClass} ${className}` : baseClass;
   return createElement(as, {
+    ...collectPassthrough(props),
     id,
     className: combined,
     style,
@@ -519,6 +523,7 @@ function Dropdown(props) {
         type: "button",
         class: triggerClassName ?? Dropdown_module_default["trigger"] ?? "",
         disabled: triggerDisabled,
+        "data-open": isOpen.value ? "true" : "false",
         children: trigger
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV3("div", {
@@ -945,8 +950,9 @@ function Surface(props) {
   const position = props.position ?? v.position;
   const inset = props.inset ?? v.inset;
   const zIndex = props.zIndex ?? v.zIndex;
-  const { maxHeight, overflow, borderStyle, transform } = props;
-  const borderWidth = props.borderWidth ?? v.borderWidth ?? (border && border !== "none" ? "default" : undefined);
+  const { maxHeight, overflow, borderStyle, transform, borderColor, scheme, pointerEvents } = props;
+  const wantsBorder = border !== undefined && border !== "none" || borderColor !== undefined;
+  const borderWidth = props.borderWidth ?? v.borderWidth ?? (wantsBorder ? "default" : undefined);
   const style = {};
   if (padding)
     style["--s-p"] = padding;
@@ -956,12 +962,16 @@ function Surface(props) {
     style["--s-radius"] = radiusValue(radius);
   if (border)
     style["--s-border-color"] = borderColorValue(border);
+  if (borderColor)
+    style["--s-border-color"] = borderColor;
   if (borderWidth)
     style["--s-border-width"] = borderWidthValue(borderWidth);
   if (shadow)
     style["--s-shadow"] = shadowValue(shadow);
   if (borderStyle)
     style["--s-border-style"] = borderStyle;
+  if (pointerEvents)
+    style["--s-pe"] = pointerEvents;
   if (width)
     style["--s-w"] = width;
   if (height)
@@ -996,7 +1006,7 @@ function Surface(props) {
   for (const key of Object.keys(props)) {
     const isData = key.startsWith("data-");
     const isAria = key.startsWith("aria-");
-    if (!isData && !isAria)
+    if (!isData && !isAria && key !== "title")
       continue;
     if (key === "data-polly-surface")
       continue;
@@ -1021,6 +1031,7 @@ function Surface(props) {
     "aria-labelledby": props["aria-labelledby"],
     "aria-describedby": props["aria-describedby"],
     "data-polly-surface": variant,
+    "data-polly-theme": scheme,
     ...passthrough
   }, props.children);
 }
@@ -1654,9 +1665,116 @@ function Host() {
   }, undefined, true, undefined, this);
 }
 var ConfirmDialog = { Host, confirm };
+// src/polly-ui/FileInput.module.css
+var FileInput_module_default = {
+  fileInput: "fileInput_esO1fA",
+  native: "native_esO1fA",
+  disabled: "disabled_esO1fA"
+};
+
+// src/polly-ui/FileInput.tsx
+import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
+function FileInput(props) {
+  const { onFiles, label = "Choose file", accept, multiple, disabled, className, id } = props;
+  const handleChange = (e) => {
+    const { files } = e.currentTarget;
+    if (files && files.length > 0)
+      onFiles(files);
+  };
+  const parts = [FileInput_module_default["fileInput"]];
+  if (disabled)
+    parts.push(FileInput_module_default["disabled"]);
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV14("label", {
+    id,
+    class: parts.filter(Boolean).join(" "),
+    "data-polly-ui": true,
+    "data-polly-file-input": true,
+    children: [
+      /* @__PURE__ */ jsxDEV14("input", {
+        type: "file",
+        class: FileInput_module_default["native"],
+        accept,
+        multiple,
+        disabled,
+        onChange: handleChange
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV14("span", {
+        children: label
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/polly-ui/Html.tsx
+import { createElement as createElement4 } from "preact";
+function Html(props) {
+  const { html, as = "div", className, id } = props;
+  return createElement4(as, {
+    ...collectPassthrough(props),
+    id,
+    class: className,
+    "data-polly-ui": true,
+    "data-polly-html": true,
+    dangerouslySetInnerHTML: { __html: html }
+  });
+}
+// src/polly-ui/Link.module.css
+var Link_module_default = {
+  link: "link__T-0-w",
+  subtle: "subtle__T-0-w"
+};
+
+// src/polly-ui/Link.tsx
+import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
+function Link(props) {
+  const { children, href, external, download, subtle, className, id } = props;
+  const parts = [Link_module_default["link"]];
+  if (subtle)
+    parts.push(Link_module_default["subtle"]);
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV15("a", {
+    ...collectPassthrough(props),
+    id,
+    class: parts.filter(Boolean).join(" "),
+    href,
+    target: external ? "_blank" : undefined,
+    rel: external ? "noopener noreferrer" : undefined,
+    download,
+    "data-polly-ui": true,
+    "data-polly-link": true,
+    children
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/Output.module.css
+var Output_module_default = {
+  output: "output_wLrUbA",
+  scroll: "scroll_wLrUbA"
+};
+
+// src/polly-ui/Output.tsx
+import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
+function Output(props) {
+  const { children, scroll, tabIndex, className, id } = props;
+  const parts = [Output_module_default["output"]];
+  if (scroll)
+    parts.push(Output_module_default["scroll"]);
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV16("pre", {
+    ...collectPassthrough(props),
+    id,
+    class: parts.filter(Boolean).join(" "),
+    tabIndex,
+    "data-polly-ui": true,
+    "data-polly-output": true,
+    children
+  }, undefined, false, undefined, this);
+}
 // src/polly-ui/Select.tsx
 import { useComputed, useSignal as useSignal2 } from "@preact/signals";
-import { jsxDEV as jsxDEV14, Fragment as Fragment2 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17, Fragment as Fragment2 } from "preact/jsx-dev-runtime";
 function formatSelected(options, selected) {
   if (selected.size === 0)
     return "";
@@ -1710,13 +1828,13 @@ function Select(props) {
   if (wide)
     triggerParts.push(Select_module_default["triggerWide"] ?? "");
   const triggerClass = triggerParts.filter(Boolean).join(" ");
-  const triggerContent = /* @__PURE__ */ jsxDEV14(Fragment2, {
+  const triggerContent = /* @__PURE__ */ jsxDEV17(Fragment2, {
     children: [
-      /* @__PURE__ */ jsxDEV14("span", {
+      /* @__PURE__ */ jsxDEV17("span", {
         class: Select_module_default["triggerLabel"],
         children: displayText.value
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14("span", {
+      /* @__PURE__ */ jsxDEV17("span", {
         class: Select_module_default["caret"],
         "aria-hidden": "true"
       }, undefined, false, undefined, this)
@@ -1725,36 +1843,36 @@ function Select(props) {
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV14("div", {
+  return /* @__PURE__ */ jsxDEV17("div", {
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-select": true,
     children: [
-      label !== undefined && /* @__PURE__ */ jsxDEV14("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV17("span", {
         class: Select_module_default["label"],
         children: label
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14(Dropdown, {
+      /* @__PURE__ */ jsxDEV17(Dropdown, {
         isOpen: isOpen2,
         trigger: triggerContent,
         triggerClassName: triggerClass,
         triggerDisabled: disabled,
         multiSelect,
         children: [
-          multiSelect && /* @__PURE__ */ jsxDEV14("div", {
+          multiSelect && /* @__PURE__ */ jsxDEV17("div", {
             class: Select_module_default["actions"],
-            children: /* @__PURE__ */ jsxDEV14(Layout, {
+            children: /* @__PURE__ */ jsxDEV17(Layout, {
               columns: "1fr 1fr",
               gap: "var(--polly-space-xs)",
               children: [
-                /* @__PURE__ */ jsxDEV14("button", {
+                /* @__PURE__ */ jsxDEV17("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleSelectAll,
                   children: "Select All"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV14("button", {
+                /* @__PURE__ */ jsxDEV17("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleClear,
@@ -1766,19 +1884,19 @@ function Select(props) {
           options.map((opt) => {
             const isSelected = selected.value.has(opt.value);
             const optClass = isSelected ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"];
-            return /* @__PURE__ */ jsxDEV14("button", {
+            return /* @__PURE__ */ jsxDEV17("button", {
               type: "button",
               class: optClass,
               onClick: () => handleOptionClick(opt.value),
               children: [
-                multiSelect && /* @__PURE__ */ jsxDEV14("input", {
+                multiSelect && /* @__PURE__ */ jsxDEV17("input", {
                   type: "checkbox",
                   class: Select_module_default["optionCheck"],
                   checked: isSelected,
                   tabIndex: -1,
                   readOnly: true
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV14("span", {
+                /* @__PURE__ */ jsxDEV17("span", {
                   children: opt.label
                 }, undefined, false, undefined, this)
               ]
@@ -1798,7 +1916,7 @@ var Skeleton_module_default = {
 };
 
 // src/polly-ui/Skeleton.tsx
-import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV18 } from "preact/jsx-dev-runtime";
 function resolveSize(value) {
   if (value === undefined)
     return;
@@ -1831,7 +1949,7 @@ function Skeleton(props) {
     parts.push(vClass);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV15("span", {
+  return /* @__PURE__ */ jsxDEV18("span", {
     class: parts.join(" "),
     style,
     "data-polly-ui": true,
@@ -1847,26 +1965,26 @@ var Tabs_module_default = {
 };
 
 // src/polly-ui/Tabs.tsx
-import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19 } from "preact/jsx-dev-runtime";
 function Tabs(props) {
   const { tabs, activeTab, action, className, id } = props;
   const parts = [Tabs_module_default["tabs"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV16("nav", {
+  return /* @__PURE__ */ jsxDEV19("nav", {
     id,
     class: parts.filter(Boolean).join(" "),
     "aria-label": props["aria-label"],
     "data-polly-ui": true,
     "data-polly-tabs": true,
-    children: /* @__PURE__ */ jsxDEV16(Layout, {
+    children: /* @__PURE__ */ jsxDEV19(Layout, {
       columns: `repeat(${tabs.length}, auto)`,
       gap: "0",
       alignItems: "end",
       children: tabs.map((tab) => {
         const isActive = activeTab === tab.id;
         const tabClass = isActive ? `${Tabs_module_default["tab"]} ${Tabs_module_default["active"]}` : Tabs_module_default["tab"];
-        return /* @__PURE__ */ jsxDEV16("button", {
+        return /* @__PURE__ */ jsxDEV19("button", {
           type: "button",
           class: tabClass,
           disabled: tab.disabled,
@@ -1880,7 +1998,7 @@ function Tabs(props) {
   }, undefined, false, undefined, this);
 }
 // src/polly-ui/Text.tsx
-import { createElement as createElement4 } from "preact";
+import { createElement as createElement5 } from "preact";
 
 // src/polly-ui/Text.module.css
 var Text_module_default = {
@@ -1890,6 +2008,7 @@ var Text_module_default = {
   warning: "warning_75HKdQ",
   success: "success_75HKdQ",
   italic: "italic_75HKdQ",
+  strikethrough: "strikethrough_75HKdQ",
   tight: "tight_75HKdQ",
   base: "base_75HKdQ",
   loose: "loose_75HKdQ",
@@ -1912,6 +2031,7 @@ function Text(props) {
     size,
     weight,
     italic,
+    strikethrough,
     leading,
     className,
     id
@@ -1925,11 +2045,13 @@ function Text(props) {
     parts.push(Text_module_default[weight]);
   if (italic)
     parts.push(Text_module_default["italic"]);
+  if (strikethrough)
+    parts.push(Text_module_default["strikethrough"]);
   if (leading)
     parts.push(Text_module_default[leading]);
   if (className)
     parts.push(className);
-  return createElement4(as, {
+  return createElement5(as, {
     ...collectPassthrough(props),
     id,
     class: parts.filter(Boolean).join(" "),
@@ -1963,7 +2085,7 @@ var TextInput_module_default = {
 };
 
 // src/polly-ui/TextInput.tsx
-import { jsxDEV as jsxDEV17 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV20 } from "preact/jsx-dev-runtime";
 function isSignal2(v) {
   return typeof v === "object" && v !== null && "value" in v && "peek" in v;
 }
@@ -1984,7 +2106,7 @@ function TextInput(props) {
   const defaultValue = controlled ? undefined : props.value ?? "";
   const className = props.className ? `${TextInput_module_default["input"]} ${props.className}` : TextInput_module_default["input"];
   if (variant === "multi") {
-    return /* @__PURE__ */ jsxDEV17("textarea", {
+    return /* @__PURE__ */ jsxDEV20("textarea", {
       ...a11y,
       class: className,
       "data-polly-input-variant": "multi",
@@ -1999,7 +2121,7 @@ function TextInput(props) {
       }
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV17("input", {
+  return /* @__PURE__ */ jsxDEV20("input", {
     ...a11y,
     type: "text",
     class: className,
@@ -2058,7 +2180,7 @@ var Toast_module_default = {
 };
 
 // src/polly-ui/Toast.tsx
-import { jsxDEV as jsxDEV18 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV21 } from "preact/jsx-dev-runtime";
 function Viewport(props) {
   const autoDismissMs = props.autoDismissMs ?? 5000;
   const [portalNode, setPortalNode] = useState3(null);
@@ -2080,13 +2202,13 @@ function Viewport(props) {
   }, [paused, entries, autoDismissMs]);
   if (!portalNode)
     return null;
-  const content = /* @__PURE__ */ jsxDEV18("div", {
+  const content = /* @__PURE__ */ jsxDEV21("div", {
     class: `${Toast_module_default["viewport"]} ${props.className ?? ""}`.trim(),
     "data-polly-ui": true,
     "data-polly-toast-viewport": true,
     onMouseEnter: () => setPaused(true),
     onMouseLeave: () => setPaused(false),
-    children: entries.map((entry) => /* @__PURE__ */ jsxDEV18(ToastItem, {
+    children: entries.map((entry) => /* @__PURE__ */ jsxDEV21(ToastItem, {
       entry
     }, entry.id, false, undefined, this))
   }, undefined, false, undefined, this);
@@ -2094,7 +2216,7 @@ function Viewport(props) {
 }
 function ToastItem({ entry }) {
   const liveness = entry.severity === "error" ? "assertive" : "polite";
-  return /* @__PURE__ */ jsxDEV18(Surface, {
+  return /* @__PURE__ */ jsxDEV21(Surface, {
     variant: "raised",
     padding: "var(--polly-space-md) var(--polly-space-lg)",
     className: Toast_module_default["item"],
@@ -2104,11 +2226,11 @@ function ToastItem({ entry }) {
     role: entry.severity === "error" ? "alert" : "status",
     "aria-live": liveness,
     children: [
-      /* @__PURE__ */ jsxDEV18("span", {
+      /* @__PURE__ */ jsxDEV21("span", {
         class: Toast_module_default["message"],
         children: entry.message
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV18("button", {
+      /* @__PURE__ */ jsxDEV21("button", {
         type: "button",
         class: Toast_module_default["close"],
         "data-polly-ui": true,
@@ -2135,7 +2257,7 @@ var Toggle_module_default = {
 };
 
 // src/polly-ui/Toggle.tsx
-import { jsxDEV as jsxDEV19 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV22 } from "preact/jsx-dev-runtime";
 function Toggle(props) {
   const { checked = false, disabled = false, label, name, className, id } = props;
   const parts = [Toggle_module_default["toggle"]];
@@ -2143,12 +2265,12 @@ function Toggle(props) {
     parts.push(Toggle_module_default["disabled"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV19("label", {
+  return /* @__PURE__ */ jsxDEV22("label", {
     class: parts.join(" "),
     "data-polly-ui": true,
     "data-polly-toggle": true,
     children: [
-      /* @__PURE__ */ jsxDEV19("input", {
+      /* @__PURE__ */ jsxDEV22("input", {
         id,
         type: "checkbox",
         role: "switch",
@@ -2158,13 +2280,13 @@ function Toggle(props) {
         checked,
         disabled
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV19("span", {
+      /* @__PURE__ */ jsxDEV22("span", {
         class: checked ? `${Toggle_module_default["track"]} ${Toggle_module_default["trackChecked"]}` : Toggle_module_default["track"],
-        children: /* @__PURE__ */ jsxDEV19("span", {
+        children: /* @__PURE__ */ jsxDEV22("span", {
           class: checked ? `${Toggle_module_default["thumb"]} ${Toggle_module_default["thumbChecked"]}` : Toggle_module_default["thumb"]
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      label !== undefined && /* @__PURE__ */ jsxDEV19("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV22("span", {
         class: Toggle_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
@@ -2183,8 +2305,12 @@ export {
   Skeleton,
   Select,
   OverlayRoot,
+  Output,
   Modal,
+  Link,
   Layout,
+  Html,
+  FileInput,
   Dropdown,
   ConfirmDialog,
   Collapsible,
@@ -2199,4 +2325,4 @@ export {
   ActionForm
 };
 
-//# debugId=D646BF0B09E9BEC064756E2164756E21
+//# debugId=5574312029A6A13F64756E2164756E21