@fairfox/polly 0.25.0 → 0.26.0

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

@@ -240,6 +240,349 @@ function ActionInput(props) {
     ...common
   }, undefined, false, undefined, this);
 }
+// src/polly-ui/Badge.module.css
+var Badge_module_default = {
+  badge: "badge_cZd0Aw",
+  info: "info_cZd0Aw",
+  success: "success_cZd0Aw",
+  warning: "warning_cZd0Aw",
+  danger: "danger_cZd0Aw"
+};
+
+// src/polly-ui/Badge.tsx
+import { jsxDEV as jsxDEV3 } from "preact/jsx-dev-runtime";
+function variantClass(variant) {
+  if (variant === "info")
+    return Badge_module_default["info"];
+  if (variant === "success")
+    return Badge_module_default["success"];
+  if (variant === "warning")
+    return Badge_module_default["warning"];
+  if (variant === "danger")
+    return Badge_module_default["danger"];
+  return;
+}
+function Badge(props) {
+  const { children, variant = "default", className, id } = props;
+  const parts = [Badge_module_default["badge"]];
+  const v = variantClass(variant);
+  if (v)
+    parts.push(v);
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV3("span", {
+    id,
+    class: parts.join(" "),
+    "data-polly-ui": true,
+    "data-polly-badge": variant,
+    children
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/Button.module.css
+var Button_module_default = {
+  btn: "btn_c4HKfA",
+  tierPrimary: "tierPrimary_c4HKfA",
+  tierSecondary: "tierSecondary_c4HKfA",
+  tierTertiary: "tierTertiary_c4HKfA",
+  colorInfo: "colorInfo_c4HKfA",
+  colorSuccess: "colorSuccess_c4HKfA",
+  colorWarning: "colorWarning_c4HKfA",
+  colorDanger: "colorDanger_c4HKfA",
+  btnSmall: "btnSmall_c4HKfA",
+  btnLarge: "btnLarge_c4HKfA",
+  btnCircle: "btnCircle_c4HKfA",
+  btnFullWidth: "btnFullWidth_c4HKfA"
+};
+
+// src/polly-ui/Layout.tsx
+import { createElement } from "preact";
+
+// src/polly-ui/Layout.module.css
+var Layout_module_default = {
+  layout: "layout_QgwWPg",
+  inline: "inline_QgwWPg",
+  stackOnMobile: "stackOnMobile_QgwWPg"
+};
+
+// src/polly-ui/Layout.tsx
+function Layout(props) {
+  const {
+    children,
+    as = "div",
+    rows,
+    columns,
+    contents,
+    subgrid,
+    gap,
+    padding,
+    height,
+    minHeight,
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    justifySelf,
+    alignSelf,
+    autoFlow,
+    autoRows,
+    autoColumns,
+    stackOnMobile,
+    inline,
+    className,
+    onClick,
+    onKeyDown,
+    role,
+    tabIndex,
+    id
+  } = props;
+  const style = {};
+  if (contents) {
+    style["display"] = "contents";
+  } else if (subgrid) {
+    style["--l-col"] = "1 / -1";
+    style["--l-cols"] = "subgrid";
+    if (padding)
+      style["--l-p"] = padding;
+    if (alignItems)
+      style["--l-ai"] = alignItems;
+    if (gap)
+      style["--l-gap"] = gap;
+  } else {
+    if (padding)
+      style["--l-p"] = padding;
+    if (height)
+      style["--l-h"] = height;
+    if (minHeight)
+      style["--l-mh"] = minHeight;
+    if (rows)
+      style["--l-rows"] = rows;
+    if (columns)
+      style["--l-cols"] = columns;
+    if (gap)
+      style["--l-gap"] = gap;
+    if (justifyItems)
+      style["--l-ji"] = justifyItems;
+    if (alignItems)
+      style["--l-ai"] = alignItems;
+    if (justifyContent)
+      style["--l-jc"] = justifyContent;
+    if (alignContent)
+      style["--l-ac"] = alignContent;
+    if (autoFlow)
+      style["--l-flow"] = autoFlow;
+    if (autoRows)
+      style["--l-arows"] = autoRows;
+    if (autoColumns)
+      style["--l-acols"] = autoColumns;
+  }
+  if (justifySelf)
+    style["--l-js"] = justifySelf;
+  if (alignSelf)
+    style["--l-as"] = alignSelf;
+  const baseParts = [Layout_module_default["layout"]];
+  if (inline)
+    baseParts.push(Layout_module_default["inline"]);
+  if (stackOnMobile)
+    baseParts.push(Layout_module_default["stackOnMobile"]);
+  const baseClass = baseParts.filter(Boolean).join(" ");
+  const combined = contents ? className : className ? `${baseClass} ${className}` : baseClass;
+  return createElement(as, {
+    id,
+    className: combined,
+    style,
+    onClick,
+    onKeyDown,
+    role,
+    tabIndex,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    "aria-describedby": props["aria-describedby"],
+    "data-polly-layout": true
+  }, children);
+}
+
+// src/polly-ui/Button.tsx
+import { jsxDEV as jsxDEV4 } from "preact/jsx-dev-runtime";
+function tierClass(tier) {
+  if (tier === "primary")
+    return Button_module_default["tierPrimary"];
+  if (tier === "tertiary")
+    return Button_module_default["tierTertiary"];
+  return Button_module_default["tierSecondary"];
+}
+function colorClass(color) {
+  if (color === "info")
+    return Button_module_default["colorInfo"];
+  if (color === "success")
+    return Button_module_default["colorSuccess"];
+  if (color === "warning")
+    return Button_module_default["colorWarning"];
+  if (color === "danger")
+    return Button_module_default["colorDanger"];
+  return;
+}
+function sizeClass(size) {
+  if (size === "small")
+    return Button_module_default["btnSmall"];
+  if (size === "large")
+    return Button_module_default["btnLarge"];
+  return;
+}
+function Button(props) {
+  const {
+    id,
+    tier = "secondary",
+    color = "default",
+    size = "normal",
+    disabled = false,
+    fullWidth = false,
+    circle = false,
+    className,
+    title,
+    icon,
+    label
+  } = props;
+  const parts = [Button_module_default["btn"] ?? ""];
+  const tc = tierClass(tier);
+  if (tc)
+    parts.push(tc);
+  const cc = colorClass(color);
+  if (cc)
+    parts.push(cc);
+  const sc = sizeClass(size);
+  if (sc)
+    parts.push(sc);
+  if (circle)
+    parts.push(Button_module_default["btnCircle"] ?? "");
+  if (fullWidth)
+    parts.push(Button_module_default["btnFullWidth"] ?? "");
+  if (className)
+    parts.push(className);
+  const buttonClass = parts.filter(Boolean).join(" ");
+  const content = icon ? /* @__PURE__ */ jsxDEV4(Layout, {
+    inline: true,
+    columns: "auto auto",
+    gap: "0.5em",
+    alignItems: "center",
+    children: [
+      icon,
+      /* @__PURE__ */ jsxDEV4("span", {
+        children: label
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this) : label;
+  const dataAction = props["data-action"];
+  const ariaLabel = props["aria-label"];
+  if ("href" in props && props.href) {
+    return /* @__PURE__ */ jsxDEV4("a", {
+      id,
+      class: buttonClass,
+      title,
+      href: disabled ? undefined : props.href,
+      target: "target" in props ? props.target : undefined,
+      rel: "rel" in props ? props.rel : undefined,
+      "aria-disabled": disabled,
+      "aria-label": ariaLabel,
+      "data-polly-ui": true,
+      "data-polly-button": tier,
+      "data-action": dataAction,
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  const resolvedType = "type" in props && props.type ? props.type : "button";
+  return /* @__PURE__ */ jsxDEV4("button", {
+    id,
+    class: buttonClass,
+    title,
+    type: resolvedType,
+    disabled,
+    "aria-label": ariaLabel,
+    "data-polly-ui": true,
+    "data-polly-button": tier,
+    "data-action": dataAction,
+    children: content
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/Checkbox.module.css
+var Checkbox_module_default = {
+  checkbox: "checkbox_EKE5sg",
+  disabled: "disabled_EKE5sg",
+  input: "input_EKE5sg",
+  label: "label_EKE5sg"
+};
+
+// src/polly-ui/Checkbox.tsx
+import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+function isSignal(value) {
+  return typeof value === "object" && value !== null && "value" in value && "peek" in value;
+}
+function Checkbox(props) {
+  const { checked, defaultChecked, name, disabled = false, label, className, id } = props;
+  const handleChange = (e) => {
+    if (isSignal(checked)) {
+      checked.value = e.currentTarget.checked;
+    }
+  };
+  const checkedValue = isSignal(checked) ? checked.value : checked;
+  const parts = [Checkbox_module_default["checkbox"]];
+  if (disabled)
+    parts.push(Checkbox_module_default["disabled"] ?? "");
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV5("label", {
+    class: parts.filter(Boolean).join(" "),
+    "data-polly-ui": true,
+    "data-polly-checkbox": true,
+    children: [
+      /* @__PURE__ */ jsxDEV5("input", {
+        id,
+        type: "checkbox",
+        class: Checkbox_module_default["input"],
+        checked: checkedValue,
+        defaultChecked,
+        name,
+        disabled,
+        onChange: handleChange
+      }, undefined, false, undefined, this),
+      label !== undefined && /* @__PURE__ */ jsxDEV5("span", {
+        class: Checkbox_module_default["label"],
+        children: label
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/polly-ui/Collapsible.module.css
+var Collapsible_module_default = {
+  collapsible: "collapsible_sEhnPw",
+  summary: "summary_sEhnPw",
+  content: "content_sEhnPw"
+};
+
+// src/polly-ui/Collapsible.tsx
+import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
+function Collapsible(props) {
+  const { summary, children, defaultOpen = false, className, id } = props;
+  const parts = [Collapsible_module_default["collapsible"]];
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV6("details", {
+    id,
+    class: parts.join(" "),
+    open: defaultOpen,
+    "data-polly-ui": true,
+    "data-polly-collapsible": true,
+    children: [
+      /* @__PURE__ */ jsxDEV6("summary", {
+        class: Collapsible_module_default["summary"],
+        children: summary
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        class: Collapsible_module_default["content"],
+        children
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 // src/polly-ui/ConfirmDialog.tsx
 import { signal as signal2 } from "@preact/signals";
 
@@ -403,7 +746,7 @@ var OverlayRoot_module_default = {
 };
 
 // src/polly-ui/OverlayRoot.tsx
-import { jsxDEV as jsxDEV3 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
 function OverlayRoot() {
   const ref = useRef2(null);
   useEffect2(() => {
@@ -422,7 +765,7 @@ function OverlayRoot() {
       release?.();
     };
   }, []);
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV7("div", {
     ref,
     class: OverlayRoot_module_default["root"],
     "data-polly-ui": true,
@@ -434,7 +777,7 @@ function getOverlayRootNode() {
 }
 
 // src/polly-ui/Modal.tsx
-import { jsxDEV as jsxDEV4 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV8 } from "preact/jsx-dev-runtime";
 var Ctx = createContext(null);
 function useModal() {
   const ctx = useContext(Ctx);
@@ -474,9 +817,9 @@ function Root({ when, onClose, children, "aria-label": ariaLabel }) {
     onClose?.();
   };
   const ctx = { id, titleId, descId, close };
-  const content = /* @__PURE__ */ jsxDEV4(Ctx.Provider, {
+  const content = /* @__PURE__ */ jsxDEV8(Ctx.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxDEV4("div", {
+    children: /* @__PURE__ */ jsxDEV8("div", {
       ref: mountRef,
       class: Modal_module_default["container"],
       "data-polly-ui": true,
@@ -495,7 +838,7 @@ function Root({ when, onClose, children, "aria-label": ariaLabel }) {
 }
 function Backdrop() {
   const { close } = useModal();
-  return /* @__PURE__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV8("div", {
     class: Modal_module_default["backdrop"],
     "data-polly-modal-backdrop": true,
     onClick: close,
@@ -503,14 +846,14 @@ function Backdrop() {
   }, undefined, false, undefined, this);
 }
 function Content({ children }) {
-  return /* @__PURE__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV8("div", {
     class: Modal_module_default["surface"],
     "data-polly-modal-surface": true,
     children
   }, undefined, false, undefined, this);
 }
 function Header({ children }) {
-  return /* @__PURE__ */ jsxDEV4("header", {
+  return /* @__PURE__ */ jsxDEV8("header", {
     class: Modal_module_default["header"],
     "data-polly-modal-header": true,
     children
@@ -518,7 +861,7 @@ function Header({ children }) {
 }
 function Title({ children }) {
   const { titleId } = useModal();
-  return /* @__PURE__ */ jsxDEV4("h2", {
+  return /* @__PURE__ */ jsxDEV8("h2", {
     id: titleId,
     class: Modal_module_default["title"],
     "data-polly-modal-title": true,
@@ -527,7 +870,7 @@ function Title({ children }) {
 }
 function Body({ children }) {
   const { descId } = useModal();
-  return /* @__PURE__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV8("div", {
     id: descId,
     class: Modal_module_default["body"],
     "data-polly-modal-body": true,
@@ -535,7 +878,7 @@ function Body({ children }) {
   }, undefined, false, undefined, this);
 }
 function Footer({ children }) {
-  return /* @__PURE__ */ jsxDEV4("footer", {
+  return /* @__PURE__ */ jsxDEV8("footer", {
     class: Modal_module_default["footer"],
     "data-polly-modal-footer": true,
     children
@@ -544,7 +887,7 @@ function Footer({ children }) {
 function Close({ children, action }) {
   const { close } = useModal();
   if (action) {
-    return /* @__PURE__ */ jsxDEV4("button", {
+    return /* @__PURE__ */ jsxDEV8("button", {
       type: "button",
       class: Modal_module_default["close"],
       "data-polly-ui": true,
@@ -554,7 +897,7 @@ function Close({ children, action }) {
       children
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV4("button", {
+  return /* @__PURE__ */ jsxDEV8("button", {
     type: "button",
     class: Modal_module_default["close"],
     "data-polly-ui": true,
@@ -576,7 +919,7 @@ var Modal = {
 };
 
 // src/polly-ui/ConfirmDialog.tsx
-import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
 var pending = signal2(null);
 var isOpen = signal2(false);
 var nextId = 0;
@@ -607,27 +950,27 @@ function Host() {
   const current = pending.value;
   if (!current)
     return null;
-  return /* @__PURE__ */ jsxDEV5(Modal.Root, {
+  return /* @__PURE__ */ jsxDEV9(Modal.Root, {
     when: isOpen,
     onClose: () => close(false),
     children: [
-      /* @__PURE__ */ jsxDEV5(Modal.Backdrop, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Modal.Content, {
+      /* @__PURE__ */ jsxDEV9(Modal.Backdrop, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9(Modal.Content, {
         children: [
-          /* @__PURE__ */ jsxDEV5(Modal.Header, {
-            children: /* @__PURE__ */ jsxDEV5(Modal.Title, {
+          /* @__PURE__ */ jsxDEV9(Modal.Header, {
+            children: /* @__PURE__ */ jsxDEV9(Modal.Title, {
               children: current.title
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          current.body ? /* @__PURE__ */ jsxDEV5(Modal.Body, {
+          current.body ? /* @__PURE__ */ jsxDEV9(Modal.Body, {
             children: current.body
           }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV5(Modal.Footer, {
-            children: /* @__PURE__ */ jsxDEV5("div", {
+          /* @__PURE__ */ jsxDEV9(Modal.Footer, {
+            children: /* @__PURE__ */ jsxDEV9("div", {
               class: ConfirmDialog_module_default["actions"],
               "data-polly-confirm-actions": true,
               children: [
-                /* @__PURE__ */ jsxDEV5("button", {
+                /* @__PURE__ */ jsxDEV9("button", {
                   type: "button",
                   class: ConfirmDialog_module_default["cancel"],
                   "data-polly-ui": true,
@@ -636,7 +979,7 @@ function Host() {
                   onClick: () => close(false),
                   children: current.cancelLabel ?? "Cancel"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("button", {
+                /* @__PURE__ */ jsxDEV9("button", {
                   type: "button",
                   class: current.danger ? ConfirmDialog_module_default["confirmDanger"] : ConfirmDialog_module_default["confirm"],
                   "data-polly-ui": true,
@@ -654,104 +997,331 @@ function Host() {
   }, undefined, true, undefined, this);
 }
 var ConfirmDialog = { Host, confirm };
-// src/polly-ui/Layout.tsx
-import { createElement } from "preact";
+// src/polly-ui/Dropdown.tsx
+import { useSignalEffect } from "@preact/signals";
+import { useEffect as useEffect4, useRef as useRef4 } from "preact/hooks";
 
-// src/polly-ui/Layout.module.css
-var Layout_module_default = {
-  layout: "layout_QgwWPg",
-  stackOnMobile: "stackOnMobile_QgwWPg"
+// src/polly-ui/Dropdown.module.css
+var Dropdown_module_default = {
+  dropdown: "dropdown_HX48zA",
+  trigger: "trigger_HX48zA",
+  menu: "menu_HX48zA",
+  alignRight: "alignRight_HX48zA"
 };
 
-// src/polly-ui/Layout.tsx
-function Layout(props) {
+// src/polly-ui/Dropdown.tsx
+import { jsxDEV as jsxDEV10 } from "preact/jsx-dev-runtime";
+var dropdownCounter = 0;
+function Dropdown(props) {
+  const { isOpen: isOpen2, trigger, children, align = "left", multiSelect = false, className, id } = props;
+  const menuRef = useRef4(null);
+  const triggerRef = useRef4(null);
+  const idRef = useRef4(`polly-dropdown-${++dropdownCounter}`);
+  const popoverId = idRef.current;
+  useEffect4(() => {
+    triggerRef.current?.setAttribute("popovertarget", popoverId);
+  }, [popoverId]);
+  useEffect4(() => {
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    const onOverlayClose = (e) => {
+      if (e instanceof CustomEvent && e.detail?.id === popoverId) {
+        isOpen2.value = false;
+      }
+    };
+    menu.addEventListener("overlay:close", onOverlayClose);
+    return () => {
+      menu.removeEventListener("overlay:close", onOverlayClose);
+    };
+  }, [popoverId, isOpen2]);
+  useSignalEffect(() => {
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    if (isOpen2.value && !menu.matches(":popover-open")) {
+      menu.showPopover();
+    } else if (!isOpen2.value && menu.matches(":popover-open")) {
+      menu.hidePopover();
+    }
+  });
+  const handleToggle = (e) => {
+    if ("newState" in e) {
+      isOpen2.value = e.newState === "open";
+    }
+  };
+  const handleMenuClick = () => {
+    if (!multiSelect) {
+      isOpen2.value = false;
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      isOpen2.value = false;
+    }
+  };
+  const parts = [Dropdown_module_default["dropdown"] ?? ""];
+  if (className)
+    parts.push(className);
+  const menuParts = [Dropdown_module_default["menu"] ?? ""];
+  if (align === "right")
+    menuParts.push(Dropdown_module_default["alignRight"] ?? "");
+  return /* @__PURE__ */ jsxDEV10("div", {
+    id,
+    class: parts.filter(Boolean).join(" "),
+    "data-polly-ui": true,
+    "data-polly-dropdown": true,
+    children: [
+      /* @__PURE__ */ jsxDEV10("button", {
+        ref: triggerRef,
+        type: "button",
+        class: Dropdown_module_default["trigger"],
+        children: trigger
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        ref: menuRef,
+        id: popoverId,
+        role: "listbox",
+        class: menuParts.filter(Boolean).join(" "),
+        popover: "auto",
+        "data-overlay-id": popoverId,
+        onToggle: handleToggle,
+        onClick: handleMenuClick,
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ jsxDEV10(Layout, {
+          rows: "auto",
+          gap: "0",
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/polly-ui/Select.tsx
+import { useComputed, useSignal } from "@preact/signals";
+
+// src/polly-ui/Select.module.css
+var Select_module_default = {
+  select: "select_daofbw",
+  label: "label_daofbw",
+  trigger: "trigger_daofbw",
+  placeholder: "placeholder_daofbw",
+  actions: "actions_daofbw",
+  actionBtn: "actionBtn_daofbw",
+  option: "option_daofbw",
+  optionSelected: "optionSelected_daofbw",
+  optionCheck: "optionCheck_daofbw"
+};
+
+// src/polly-ui/Select.tsx
+import { jsxDEV as jsxDEV11 } from "preact/jsx-dev-runtime";
+function formatSelected(options, selected) {
+  if (selected.size === 0)
+    return "";
+  const labels = [];
+  for (const opt of options) {
+    if (selected.has(opt.value))
+      labels.push(opt.label);
+  }
+  return labels.join(", ");
+}
+function Select(props) {
   const {
-    children,
-    as = "div",
-    rows,
-    columns,
-    contents,
-    subgrid,
-    gap,
-    padding,
-    height,
-    minHeight,
-    justifyItems,
-    alignItems,
-    justifyContent,
-    alignContent,
-    justifySelf,
-    alignSelf,
-    autoFlow,
-    autoRows,
-    autoColumns,
-    stackOnMobile,
+    options,
+    selected,
+    label,
+    placeholder = "Select…",
+    multiSelect = false,
+    disabled = false,
     className,
-    onClick,
-    onKeyDown,
-    role,
-    tabIndex,
     id
   } = props;
-  const style = {};
-  if (contents) {
-    style["display"] = "contents";
-  } else if (subgrid) {
-    style["--l-col"] = "1 / -1";
-    style["--l-cols"] = "subgrid";
-    if (padding)
-      style["--l-p"] = padding;
-    if (alignItems)
-      style["--l-ai"] = alignItems;
-    if (gap)
-      style["--l-gap"] = gap;
-  } else {
-    if (padding)
-      style["--l-p"] = padding;
-    if (height)
-      style["--l-h"] = height;
-    if (minHeight)
-      style["--l-mh"] = minHeight;
-    if (rows)
-      style["--l-rows"] = rows;
-    if (columns)
-      style["--l-cols"] = columns;
-    if (gap)
-      style["--l-gap"] = gap;
-    if (justifyItems)
-      style["--l-ji"] = justifyItems;
-    if (alignItems)
-      style["--l-ai"] = alignItems;
-    if (justifyContent)
-      style["--l-jc"] = justifyContent;
-    if (alignContent)
-      style["--l-ac"] = alignContent;
-    if (autoFlow)
-      style["--l-flow"] = autoFlow;
-    if (autoRows)
-      style["--l-arows"] = autoRows;
-    if (autoColumns)
-      style["--l-acols"] = autoColumns;
-  }
-  if (justifySelf)
-    style["--l-js"] = justifySelf;
-  if (alignSelf)
-    style["--l-as"] = alignSelf;
-  const baseClass = stackOnMobile ? `${Layout_module_default["layout"]} ${Layout_module_default["stackOnMobile"]}` : Layout_module_default["layout"];
-  const combined = contents ? className : className ? `${baseClass} ${className}` : baseClass;
-  return createElement(as, {
+  const isOpen2 = useSignal(false);
+  const displayText = useComputed(() => {
+    const text = formatSelected(options, selected.value);
+    return text.length > 0 ? text : placeholder;
+  });
+  const isEmpty = useComputed(() => selected.value.size === 0);
+  const handleOptionClick = (value) => {
+    if (multiSelect) {
+      const next = new Set(selected.value);
+      if (next.has(value))
+        next.delete(value);
+      else
+        next.add(value);
+      selected.value = next;
+    } else {
+      selected.value = new Set([value]);
+      isOpen2.value = false;
+    }
+  };
+  const handleSelectAll = () => {
+    selected.value = new Set(options.map((o) => o.value));
+  };
+  const handleClear = () => {
+    selected.value = new Set;
+  };
+  const triggerClass = isEmpty.value ? `${Select_module_default["trigger"]} ${Select_module_default["placeholder"]}` : Select_module_default["trigger"];
+  const triggerButton = /* @__PURE__ */ jsxDEV11("button", {
+    type: "button",
+    class: triggerClass,
+    disabled,
+    children: displayText.value
+  }, undefined, false, undefined, this);
+  const parts = [Select_module_default["select"] ?? ""];
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV11("div", {
     id,
-    className: combined,
+    class: parts.filter(Boolean).join(" "),
+    "data-polly-ui": true,
+    "data-polly-select": true,
+    children: [
+      label !== undefined && /* @__PURE__ */ jsxDEV11("span", {
+        class: Select_module_default["label"],
+        children: label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11(Dropdown, {
+        isOpen: isOpen2,
+        trigger: triggerButton,
+        multiSelect,
+        children: [
+          multiSelect && /* @__PURE__ */ jsxDEV11("div", {
+            class: Select_module_default["actions"],
+            children: /* @__PURE__ */ jsxDEV11(Layout, {
+              columns: "1fr 1fr",
+              gap: "var(--polly-space-xs)",
+              children: [
+                /* @__PURE__ */ jsxDEV11("button", {
+                  type: "button",
+                  class: Select_module_default["actionBtn"],
+                  onClick: handleSelectAll,
+                  children: "Select All"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV11("button", {
+                  type: "button",
+                  class: Select_module_default["actionBtn"],
+                  onClick: handleClear,
+                  children: "Clear"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          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__ */ jsxDEV11("button", {
+              type: "button",
+              class: optClass,
+              onClick: () => handleOptionClick(opt.value),
+              children: [
+                multiSelect && /* @__PURE__ */ jsxDEV11("input", {
+                  type: "checkbox",
+                  class: Select_module_default["optionCheck"],
+                  checked: isSelected,
+                  tabIndex: -1,
+                  readOnly: true
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV11("span", {
+                  children: opt.label
+                }, undefined, false, undefined, this)
+              ]
+            }, String(opt.value), true, undefined, this);
+          })
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/polly-ui/Skeleton.module.css
+var Skeleton_module_default = {
+  skeleton: "skeleton_Jrgo0g",
+  text: "text_Jrgo0g",
+  rect: "rect_Jrgo0g",
+  circle: "circle_Jrgo0g"
+};
+
+// src/polly-ui/Skeleton.tsx
+import { jsxDEV as jsxDEV12 } from "preact/jsx-dev-runtime";
+function resolveSize(value) {
+  if (value === undefined)
+    return;
+  if (typeof value === "number")
+    return `${value}px`;
+  return value;
+}
+function variantClass2(variant) {
+  if (variant === "circle")
+    return Skeleton_module_default["circle"];
+  if (variant === "rect")
+    return Skeleton_module_default["rect"];
+  return Skeleton_module_default["text"];
+}
+function Skeleton(props) {
+  const { variant = "text", width, height, className } = props;
+  const style = {};
+  const w = resolveSize(width);
+  const h = resolveSize(height);
+  if (w !== undefined)
+    style["width"] = w;
+  if (h !== undefined)
+    style["height"] = h;
+  const parts = [];
+  const base = Skeleton_module_default["skeleton"];
+  if (base)
+    parts.push(base);
+  const vClass = variantClass2(variant);
+  if (vClass)
+    parts.push(vClass);
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV12("span", {
+    class: parts.join(" "),
     style,
-    onClick,
-    onKeyDown,
-    role,
-    tabIndex,
+    "data-polly-ui": true,
+    "data-polly-skeleton": variant,
+    "aria-hidden": "true"
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/Tabs.module.css
+var Tabs_module_default = {
+  tabs: "tabs_xKO6GA",
+  tab: "tab_xKO6GA",
+  active: "active_xKO6GA"
+};
+
+// src/polly-ui/Tabs.tsx
+import { jsxDEV as jsxDEV13 } 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__ */ jsxDEV13("nav", {
+    id,
+    class: parts.filter(Boolean).join(" "),
     "aria-label": props["aria-label"],
-    "aria-labelledby": props["aria-labelledby"],
-    "aria-describedby": props["aria-describedby"],
-    "data-polly-layout": true
-  }, children);
+    "data-polly-ui": true,
+    "data-polly-tabs": true,
+    children: /* @__PURE__ */ jsxDEV13(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__ */ jsxDEV13("button", {
+          type: "button",
+          class: tabClass,
+          disabled: tab.disabled,
+          "aria-current": isActive ? "page" : undefined,
+          "data-action": action,
+          "data-action-id": tab.id,
+          children: tab.label
+        }, tab.id, false, undefined, this);
+      })
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 }
 // src/polly-ui/internal/input-base.ts
 function buildInputA11y(props) {
@@ -778,8 +1348,8 @@ var TextInput_module_default = {
 };
 
 // src/polly-ui/TextInput.tsx
-import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
-function isSignal(v) {
+import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
+function isSignal2(v) {
   return typeof v === "object" && v !== null && "value" in v && "peek" in v;
 }
 function TextInput(props) {
@@ -794,12 +1364,12 @@ function TextInput(props) {
     disabled: props.disabled,
     readOnly: props.readOnly
   });
-  const controlled = isSignal(props.value);
+  const controlled = isSignal2(props.value);
   const stringValue = controlled ? props.value.value : undefined;
   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__ */ jsxDEV6("textarea", {
+    return /* @__PURE__ */ jsxDEV14("textarea", {
       ...a11y,
       class: className,
       "data-polly-input-variant": "multi",
@@ -814,7 +1384,7 @@ function TextInput(props) {
       }
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV6("input", {
+  return /* @__PURE__ */ jsxDEV14("input", {
     ...a11y,
     type: "text",
     class: className,
@@ -831,7 +1401,7 @@ function TextInput(props) {
 }
 // src/polly-ui/Toast.tsx
 import { createPortal as createPortal2 } from "preact/compat";
-import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "preact/hooks";
+import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "preact/hooks";
 
 // src/actions/error.ts
 import { signal as signal3 } from "@preact/signals";
@@ -873,16 +1443,16 @@ var Toast_module_default = {
 };
 
 // src/polly-ui/Toast.tsx
-import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
 function Viewport(props) {
   const autoDismissMs = props.autoDismissMs ?? 5000;
   const [portalNode, setPortalNode] = useState3(null);
   const [paused, setPaused] = useState3(false);
   const entries = errorState.value;
-  useEffect4(() => {
+  useEffect5(() => {
     setPortalNode(getOverlayRootNode());
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (paused || entries.length === 0)
       return;
     const head = entries[0];
@@ -895,13 +1465,13 @@ function Viewport(props) {
   }, [paused, entries, autoDismissMs]);
   if (!portalNode)
     return null;
-  const content = /* @__PURE__ */ jsxDEV7("div", {
+  const content = /* @__PURE__ */ jsxDEV15("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__ */ jsxDEV7(ToastItem, {
+    children: entries.map((entry) => /* @__PURE__ */ jsxDEV15(ToastItem, {
       entry
     }, entry.id, false, undefined, this))
   }, undefined, false, undefined, this);
@@ -909,8 +1479,8 @@ function Viewport(props) {
 }
 function ToastItem({ entry }) {
   const liveness = entry.severity === "error" ? "assertive" : "polite";
-  const ref = useRef4(null);
-  return /* @__PURE__ */ jsxDEV7("div", {
+  const ref = useRef5(null);
+  return /* @__PURE__ */ jsxDEV15("div", {
     ref,
     class: Toast_module_default["item"],
     "data-polly-ui": true,
@@ -919,11 +1489,11 @@ function ToastItem({ entry }) {
     role: entry.severity === "error" ? "alert" : "status",
     "aria-live": liveness,
     children: [
-      /* @__PURE__ */ jsxDEV7("span", {
+      /* @__PURE__ */ jsxDEV15("span", {
         class: Toast_module_default["message"],
         children: entry.message
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV7("button", {
+      /* @__PURE__ */ jsxDEV15("button", {
         type: "button",
         class: Toast_module_default["close"],
         "data-polly-ui": true,
@@ -937,17 +1507,75 @@ function ToastItem({ entry }) {
   }, undefined, true, undefined, this);
 }
 var Toast = { Viewport };
+// src/polly-ui/Toggle.module.css
+var Toggle_module_default = {
+  toggle: "toggle_rnf-SQ",
+  disabled: "disabled_rnf-SQ",
+  input: "input_rnf-SQ",
+  track: "track_rnf-SQ",
+  trackChecked: "trackChecked_rnf-SQ",
+  thumb: "thumb_rnf-SQ",
+  thumbChecked: "thumbChecked_rnf-SQ",
+  label: "label_rnf-SQ"
+};
+
+// src/polly-ui/Toggle.tsx
+import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
+function Toggle(props) {
+  const { checked = false, disabled = false, label, name, className, id } = props;
+  const parts = [Toggle_module_default["toggle"]];
+  if (disabled)
+    parts.push(Toggle_module_default["disabled"]);
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV16("label", {
+    class: parts.join(" "),
+    "data-polly-ui": true,
+    "data-polly-toggle": true,
+    children: [
+      /* @__PURE__ */ jsxDEV16("input", {
+        id,
+        type: "checkbox",
+        role: "switch",
+        name,
+        "aria-checked": checked,
+        class: Toggle_module_default["input"],
+        checked,
+        disabled
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV16("span", {
+        class: checked ? `${Toggle_module_default["track"]} ${Toggle_module_default["trackChecked"]}` : Toggle_module_default["track"],
+        children: /* @__PURE__ */ jsxDEV16("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__ */ jsxDEV16("span", {
+        class: Toggle_module_default["label"],
+        children: label
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 export {
   getOverlayRootNode,
   confirm,
+  Toggle,
   Toast,
   TextInput,
+  Tabs,
+  Skeleton,
+  Select,
   OverlayRoot,
   Modal,
   Layout,
+  Dropdown,
   ConfirmDialog,
+  Collapsible,
+  Checkbox,
+  Button,
+  Badge,
   ActionInput,
   ActionForm
 };
 
-//# debugId=17892EC9C7CDCA6D64756E2164756E21
+//# debugId=E8BC12017CFEA66464756E2164756E21