@blockbite/ui 2.0.7 → 2.0.10

package/dist/AutocompleteDropdown.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface OptionPanelDropdownProps {
     defaultValue: string;
     options: {
@@ -7,5 +8,5 @@ interface OptionPanelDropdownProps {
     onPressedChange: (value: string) => void;
     swatch?: boolean;
 }
-export declare function AutocompleteDropdown({ defaultValue, options, swatch, onPressedChange, }: OptionPanelDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function AutocompleteDropdown({ defaultValue, options, swatch, onPressedChange, }: OptionPanelDropdownProps): React.JSX.Element;
 export {};

package/dist/AutocompleteDropdown.js

@@ -1,95 +1,37 @@
-import { j as e } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { Pencil1 as v } from "@blockbite/icons";
-import { Dropdown as f, TextControl as j, Button as h } from "@wordpress/components";
-import { useState as c, useEffect as p } from "@wordpress/element";
-import n from "classnames";
-import { ButtonToggle as N } from "./ButtonToggle.js";
-import { Wrap as x } from "./Wrap.js";
-function T({
-  defaultValue: r,
-  options: s,
-  swatch: l,
-  onPressedChange: u
-}) {
-  const [o, i] = c(""), [d, m] = c([]);
-  return p(() => {
-    m(
-      s.filter(
-        (t) => t.label.toLowerCase().includes(o.toLowerCase())
-      )
-    );
-  }, [o, s]), p(() => {
-    i(""), m(s);
-  }, [r, s]), /* @__PURE__ */ e.jsx(
-    f,
-    {
-      className: "option-panel-dropdown",
-      contentClassName: "option-panel-dropdown-content",
-      popoverProps: { placement: "bottom-start" },
-      renderToggle: ({ isOpen: t, onToggle: a }) => /* @__PURE__ */ e.jsx(x, { important: !0, children: /* @__PURE__ */ e.jsx(
-        h,
-        {
-          variant: "secondary",
-          size: "small",
-          onClick: a,
-          "aria-expanded": t,
-          children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 !bg-transparent !p-0 !text-[11px] !text-current", children: [
-            l && /* @__PURE__ */ e.jsx(
-              "div",
-              {
-                className: n(
-                  `h-3 w-3 rounded-full bg-${r}`
-                )
-              }
-            ),
-            /* @__PURE__ */ e.jsx("span", { children: r || "Select option…" }),
-            /* @__PURE__ */ e.jsx(v, {})
-          ] })
-        }
-      ) }),
-      renderContent: () => /* @__PURE__ */ e.jsx(x, { important: !0, children: /* @__PURE__ */ e.jsxs("div", { className: "w-52", children: [
-        /* @__PURE__ */ e.jsx(
-          j,
-          {
-            label: "Search options",
-            value: o,
-            onChange: (t) => i(t),
-            autoComplete: "off"
-          }
-        ),
-        /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-2 gap-1 !bg-transparent !p-0 !pt-2", children: [
-          d.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "!text-gray-medium col-span-2 pb-2 text-center !text-[11px]", children: "No options found." }),
-          d.map((t, a) => /* @__PURE__ */ e.jsxs(
-            N,
-            {
-              className: n({
-                "bg-primary": t.value
-              }),
-              size: "small",
-              value: t.value.toString(),
-              defaultPressed: r,
-              onPressedChange: (g) => {
-                u(g ? t.value : "");
-              },
-              children: [
-                l && /* @__PURE__ */ e.jsx(
-                  "div",
-                  {
-                    className: n(
-                      `mr-3 h-3 w-3 rounded-full bg-${t.value}`
-                    )
-                  }
-                ),
-                t.label
-              ]
-            },
-            `ButtonToggle__${t.value}___${a}`
-          ))
-        ] })
-      ] }) })
-    }
-  );
+import React from 'react';
+void React;
+import { Pencil1 as Pencil1Icon } from '@blockbite/icons';
+import { Button, Dropdown, TextControl } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import classNames from 'classnames';
+import { ButtonToggle } from './ButtonToggle.js';
+import { Wrap } from './Wrap.js';
+export function AutocompleteDropdown({ defaultValue, options, swatch, onPressedChange, }) {
+    const [activeKeyword, setActiveKeyword] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    useEffect(() => {
+        setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(activeKeyword.toLowerCase())));
+    }, [activeKeyword, options]);
+    useEffect(() => {
+        setActiveKeyword('');
+        setFilteredOptions(options);
+    }, [defaultValue, options]);
+    return (React.createElement(Dropdown, { className: "option-panel-dropdown", contentClassName: "option-panel-dropdown-content", popoverProps: { placement: 'bottom-start' }, renderToggle: ({ isOpen, onToggle }) => (React.createElement(Wrap, { important: true },
+            React.createElement(Button, { variant: "secondary", size: "small", onClick: onToggle, "aria-expanded": isOpen },
+                React.createElement("div", { className: "flex items-center gap-1 !bg-transparent !p-0 !text-[11px] !text-current" },
+                    swatch && (React.createElement("div", { className: classNames(`h-3 w-3 rounded-full bg-${defaultValue}`) })),
+                    React.createElement("span", null, defaultValue || 'Select option…'),
+                    React.createElement(Pencil1Icon, null))))), renderContent: () => (React.createElement(Wrap, { important: true },
+            React.createElement("div", { className: "w-52" },
+                React.createElement(TextControl, { label: "Search options", value: activeKeyword, onChange: (value) => setActiveKeyword(value), autoComplete: "off" }),
+                React.createElement("div", { className: "grid grid-cols-2 gap-1 !bg-transparent !p-0 !pt-2" },
+                    filteredOptions.length === 0 && (React.createElement("div", { className: "!text-gray-medium col-span-2 pb-2 text-center !text-[11px]" }, "No options found.")),
+                    filteredOptions.map((option, index) => (React.createElement(ButtonToggle, { key: `ButtonToggle__${option.value}___${index}`, className: classNames({
+                            'bg-primary': option.value,
+                        }), size: "small", value: option.value.toString(), defaultPressed: defaultValue, onPressedChange: (value) => {
+                            onPressedChange(value ? option.value : '');
+                        } },
+                        swatch && (React.createElement("div", { className: classNames(`mr-3 h-3 w-3 rounded-full bg-${option.value}`) })),
+                        option.label))))))) }));
 }
-export {
-  T as AutocompleteDropdown
-};
+//# sourceMappingURL=AutocompleteDropdown.js.map

package/dist/AutocompleteDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../src/AutocompleteDropdown.tsx"],"names":[],"mappings":"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"}

package/dist/Badge.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 type BadgeProps = {
     children: React.ReactNode;
     className?: string;
     onClick?: () => void;
 };
-export declare const Badge: ({ children, className, onClick }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ children, className, onClick }: BadgeProps) => React.JSX.Element;
 export {};

package/dist/Badge.js

@@ -1,16 +1,7 @@
-import { j as m } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import r from "classnames";
-const i = ({ children: e, className: t, onClick: s }) => /* @__PURE__ */ m.jsx(
-  "div",
-  {
-    onClick: s,
-    className: r(
-      t,
-      "inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
-    ),
-    children: e
-  }
-);
-export {
-  i as Badge
+import classNames from 'classnames';
+import React from 'react';
+void React;
+export const Badge = ({ children, className, onClick }) => {
+    return (React.createElement("div", { onClick: onClick, className: classNames(className, 'inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800') }, children));
 };
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,KAAK,KAAK,CAAC;AAQX,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAc,EAAE,EAAE;IACpE,OAAO,CACL,6BACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,mGAAmG,CACpG,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/BitePreview.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export declare const BitePreview: ({ htmlContent, cssContent, frontendAssets }: {
     htmlContent: any;
     cssContent: any;
     frontendAssets: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/dist/BitePreview.js

@@ -1,62 +1,56 @@
-import { j as r } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { useRef as h, useState as y, useEffect as E, createPortal as w } from "@wordpress/element";
-const j = ({ htmlContent: i, cssContent: s, frontendAssets: o }) => {
-  const a = h(null), [l, p] = y(null);
-  return E(() => {
-    const n = a.current;
-    return n && (n.onload = () => {
-      const t = n.contentDocument || n.contentWindow.document;
-      if (t) {
-        p(t.body);
-        const c = t.createElement("style");
-        c.innerHTML = s, t.head.appendChild(c), o.forEach(({ type: d, id: m, url: f }) => {
-          const u = document.getElementById(m);
-          if (u) {
-            const e = document.adoptNode(
-              u.cloneNode(!0)
-            );
-            t.head.appendChild(e);
-          } else {
-            const e = t.createElement(
-              d === "script" ? "script" : "link"
-            );
-            e.id = m, d === "script" ? (e.src = f, e.async = !0) : (e.rel = "stylesheet", e.href = f), t.head.appendChild(e);
-          }
-        });
-      }
-    }), () => {
-      n && (n.onload = null);
-    };
-  }, [i, s, o]), /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      className: "render-preview-container",
-      style: { width: "100%", minHeight: "100%" },
-      children: [
-        /* @__PURE__ */ r.jsx(
-          "iframe",
-          {
-            ref: a,
-            title: "Preview",
-            className: "editor-styles-wrapper",
-            width: "100%",
-            height: "100%"
-          }
-        ),
-        l && w(
-          /* @__PURE__ */ r.jsx("div", { className: "b_", children: /* @__PURE__ */ r.jsx(
-            "div",
-            {
-              className: "b_utils",
-              dangerouslySetInnerHTML: { __html: i }
+import { createPortal, useEffect, useRef, useState } from '@wordpress/element';
+import React from 'react';
+void React;
+export const BitePreview = ({ htmlContent, cssContent, frontendAssets }) => {
+    const iframeRef = useRef(null);
+    const [iframeBody, setIframeBody] = useState(null);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (iframe) {
+            iframe.onload = () => {
+                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+                if (iframeDocument) {
+                    setIframeBody(iframeDocument.body); // Set the iframe body for portal
+                    // Inject CSS content directly
+                    const styleTag = iframeDocument.createElement('style');
+                    styleTag.innerHTML = cssContent;
+                    iframeDocument.head.appendChild(styleTag);
+                    // Adopt or Create Frontend Assets
+                    frontendAssets.forEach(({ type, id, url }) => {
+                        const existingElement = document.getElementById(id);
+                        if (existingElement) {
+                            // If the asset exists in the parent, move it to the iframe
+                            const adoptedElement = document.adoptNode(existingElement.cloneNode(true));
+                            iframeDocument.head.appendChild(adoptedElement);
+                        }
+                        else {
+                            // Create a new script or style if not found
+                            const newElement = iframeDocument.createElement(type === 'script' ? 'script' : 'link');
+                            newElement.id = id;
+                            if (type === 'script') {
+                                newElement.src = url;
+                                newElement.async = true;
+                            }
+                            else {
+                                newElement.rel = 'stylesheet';
+                                newElement.href = url;
+                            }
+                            iframeDocument.head.appendChild(newElement);
+                        }
+                    });
+                }
+            };
+        }
+        return () => {
+            if (iframe) {
+                iframe.onload = null; // Clean up event listener
             }
-          ) }),
-          l
-        )
-      ]
-    }
-  );
-};
-export {
-  j as BitePreview
+        };
+    }, [htmlContent, cssContent, frontendAssets]);
+    return (React.createElement("div", { className: "render-preview-container", style: { width: '100%', minHeight: '100%' } },
+        React.createElement("iframe", { ref: iframeRef, title: "Preview", className: "editor-styles-wrapper", width: "100%", height: "100%" }),
+        iframeBody &&
+            createPortal(React.createElement("div", { className: "b_" },
+                React.createElement("div", { className: "b_utils", dangerouslySetInnerHTML: { __html: htmlContent } })), iframeBody)));
 };
+//# sourceMappingURL=BitePreview.js.map

package/dist/BitePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitePreview.js","sourceRoot":"","sources":["../src/BitePreview.tsx"],"names":[],"mappings":"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"}

package/dist/Button.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type ButtonProps = {
     children?: React.ReactNode;
     asChild?: boolean;
@@ -10,5 +11,5 @@ type ButtonProps = {
     icon?: any;
     disabled?: boolean;
 };
-export declare const Button: ({ children, size, label, className, onClick, variant, display, icon, disabled, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ children, size, label, className, onClick, variant, display, icon, disabled, }: ButtonProps) => React.JSX.Element;
 export {};

package/dist/Button.js

@@ -1,52 +1,13 @@
-import { j as r } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { Button as a } from "@wordpress/components";
-import c from "classnames";
-import { Icon as f } from "./Icon.js";
-const h = ({
-  children: i,
-  size: m = "default",
-  label: t,
-  className: u,
-  onClick: l,
-  variant: o = "primary",
-  display: s = "auto",
-  icon: n,
-  disabled: p = !1
-}) => {
-  const e = s === "icon" || s === "icon-lg";
-  return /* @__PURE__ */ r.jsxs(
-    a,
-    {
-      size: m,
-      variant: o,
-      label: t,
-      showTooltip: !0,
-      disabled: p,
-      className: c(
-        u,
-        "blockbite-ui__button",
-        "flex items-center justify-center gap-1",
-        { "is-primary": o === "primary" },
-        { "is-secondary": o === "secondary" },
-        { "is-link": o === "link" },
-        { "is-tertiary": o === "tertiary" },
-        { "is-icon": s === "icon" }
-      ),
-      onClick: l,
-      children: [
-        n && /* @__PURE__ */ r.jsx(
-          f,
-          {
-            icon: n,
-            className: c({ "h-4 w-4": s === "icon-lg" })
-          }
-        ),
-        e ? null : i,
-        t && !i && !e ? /* @__PURE__ */ r.jsx("span", { children: t }) : null
-      ]
-    }
-  );
-};
-export {
-  h as Button
+import React from 'react';
+void React;
+import { Button as WordpressButton } from '@wordpress/components';
+import classNames from 'classnames';
+import { Icon } from './Icon.js';
+export const Button = ({ children, size = 'default', label, className, onClick, variant = 'primary', display = 'auto', icon, disabled = false, }) => {
+    const isIconDisplay = display === 'icon' || display === 'icon-lg';
+    return (React.createElement(WordpressButton, { size: size, variant: variant, label: label, showTooltip: true, disabled: disabled, className: classNames(className, 'blockbite-ui__button', 'flex items-center justify-center gap-1', { 'is-primary': variant === 'primary' }, { 'is-secondary': variant === 'secondary' }, { 'is-link': variant === 'link' }, { 'is-tertiary': variant === 'tertiary' }, { 'is-icon': display === 'icon' }), onClick: onClick },
+        icon && (React.createElement(Icon, { icon: icon, className: classNames({ 'h-4 w-4': display === 'icon-lg' }) })),
+        !isIconDisplay ? children : null,
+        label && !children && !isIconDisplay ? React.createElement("span", null, label) : null));
 };
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,KAAK,KAAK,CAAC;AAEX,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAejC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,QAAQ,GAAG,KAAK,GACJ,EAAE,EAAE;IAChB,MAAM,aAAa,GAAG,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,SAAS,CAAC;IAElE,OAAO,CACL,oBAAC,eAAe,IACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,IAAI,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,sBAAsB,EACtB,wCAAwC,EACxC,EAAE,YAAY,EAAE,OAAO,KAAK,SAAS,EAAE,EACvC,EAAE,cAAc,EAAE,OAAO,KAAK,WAAW,EAAE,EAC3C,EAAE,SAAS,EAAE,OAAO,KAAK,MAAM,EAAE,EACjC,EAAE,aAAa,EAAE,OAAO,KAAK,UAAU,EAAE,EACzC,EAAE,SAAS,EAAE,OAAO,KAAK,MAAM,EAAE,CAClC,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,OAAO,KAAK,SAAS,EAAE,CAAC,GAC3D,CACH;QACA,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QAChC,KAAK,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,kCAAO,KAAK,CAAQ,CAAC,CAAC,CAAC,IAAI,CACnD,CACnB,CAAC;AACJ,CAAC,CAAC"}

package/dist/ButtonToggle.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type ButtonToggleProps = {
     children?: React.ReactNode;
     className?: string;

package/dist/ButtonToggle.js

@@ -1,111 +1,52 @@
-import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { Button as k } from "@wordpress/components";
-import { memo as p, useState as g, useEffect as w, useCallback as B } from "@wordpress/element";
-import d from "classnames";
-import { Icon as h } from "./Icon.js";
-import { Wrap as N } from "./Wrap.js";
-const E = p(
-  ({
-    children: u,
-    className: c,
-    value: r,
-    variant: o = "secondary",
-    defaultPressed: i,
-    onPressedChange: m,
-    icon: b,
-    size: x = "compact",
-    display: a = "auto",
-    label: l
-  }) => {
-    const [t, n] = g(!1);
-    w(() => {
-      n(i === r);
-    }, [i]);
-    const j = B(() => {
-      n((_) => !_), m(r);
-    }, [t, m]);
-    return /* @__PURE__ */ s.jsxs(
-      k,
-      {
-        "aria-label": l,
-        className: d(c, "blockbite-ui__button--default"),
-        value: r,
-        size: x,
-        label: l,
-        variant: o,
-        showTooltip: !0,
-        isPressed: t,
-        onClick: j,
-        children: [
-          b && /* @__PURE__ */ s.jsx(h, { icon: b }),
-          a !== "icon" ? u : null,
-          l && !u && a !== "icon" ? /* @__PURE__ */ s.jsx("span", { children: l }) : null
-        ]
-      }
-    );
-  }
-), G = p(
-  ({
-    className: u,
-    defaultPressed: c = "",
-    toggle: r = !0,
-    display: o = "auto",
-    options: i,
-    size: m = "compact",
-    tabs: b = !1,
-    variant: x = "secondary",
-    stretch: a = !1,
-    onPressedChange: l
-  }) => {
-    const [t, n] = g(c);
-    w(() => {
-      n(c);
-    }, [c]);
-    const j = B(
-      (e) => {
-        const f = r && t === e ? "" : e;
-        n(f), l?.(f);
-      },
-      [t, l, r]
-    ), _ = (e) => o === "icon" && e?.icon ? /* @__PURE__ */ s.jsx(h, { icon: e.icon }) : o === "label" ? /* @__PURE__ */ s.jsx("span", { children: e.label }) : /* @__PURE__ */ s.jsxs("span", { className: "flex items-center justify-center gap-1", children: [
-      e.icon && /* @__PURE__ */ s.jsx(h, { icon: e.icon }),
-      /* @__PURE__ */ s.jsx("span", { children: e.label })
-    ] });
-    return /* @__PURE__ */ s.jsx(
-      N,
-      {
-        className: d(
-          "blockbite-ui__button-group flex flex-wrap gap-1",
-          u,
-          b ? "blockbite-ui__button-group--tabs" : ""
-        ),
-        children: i.map((e, f) => /* @__PURE__ */ s.jsxs(
-          k,
-          {
-            className: d("blockbite-ui__button--default", {
-              grow: a,
-              "justify-center": a
-            }),
-            "aria-label": e.label,
-            showTooltip: !0,
-            value: e.value,
-            size: m,
-            label: e?.tooltip || e.label,
-            variant: x,
-            isPressed: t === e.value,
-            onClick: () => j(e.value),
-            children: [
-              _(e),
-              e.children && e.children
-            ]
-          },
-          `ButtonToggleGroup__${e.value}__${e.label}__${f}`
-        ))
-      }
-    );
-  }
-);
-export {
-  E as ButtonToggle,
-  G as ButtonToggleGroup
-};
+import { Button as WordpressButton } from '@wordpress/components';
+import { memo, useCallback, useEffect, useState } from '@wordpress/element';
+import classNames from 'classnames';
+import React from 'react';
+import { Icon } from './Icon.js';
+import { Wrap } from './Wrap.js';
+void React;
+export const ButtonToggle = memo(({ children, className, value, variant = 'secondary', defaultPressed, onPressedChange, icon, size = 'compact', display = 'auto', label, }) => {
+    const [isPressed, setIsPressed] = useState(false);
+    useEffect(() => {
+        setIsPressed(defaultPressed === value ? true : false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultPressed]);
+    const handleClick = useCallback(() => {
+        setIsPressed((prev) => !prev);
+        onPressedChange(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isPressed, onPressedChange]);
+    return (React.createElement(WordpressButton, { "aria-label": label, className: classNames(className, 'blockbite-ui__button--default'), value: value, size: size, label: label, variant: variant, showTooltip: true, isPressed: isPressed, onClick: handleClick },
+        icon && React.createElement(Icon, { icon: icon }),
+        display !== 'icon' ? children : null,
+        label && !children && display !== 'icon' ? React.createElement("span", null, label) : null));
+});
+export const ButtonToggleGroup = memo(({ className, defaultPressed = '', toggle = true, display = 'auto', options, size = 'compact', tabs = false, variant = 'secondary', stretch = false, onPressedChange, }) => {
+    const [isPressed, setIsPressed] = useState(defaultPressed);
+    useEffect(() => {
+        setIsPressed(defaultPressed);
+    }, [defaultPressed]);
+    const handleButtonClick = useCallback((value) => {
+        const newValue = toggle && isPressed === value ? '' : value;
+        setIsPressed(newValue);
+        onPressedChange === null || onPressedChange === void 0 ? void 0 : onPressedChange(newValue);
+    }, [isPressed, onPressedChange, toggle]);
+    const renderContent = (option) => {
+        if (display === 'icon' && (option === null || option === void 0 ? void 0 : option.icon)) {
+            return React.createElement(Icon, { icon: option.icon });
+        }
+        else if (display === 'label') {
+            return React.createElement("span", null, option.label);
+        }
+        return (React.createElement("span", { className: "flex items-center justify-center gap-1" },
+            option.icon && React.createElement(Icon, { icon: option.icon }),
+            React.createElement("span", null, option.label)));
+    };
+    return (React.createElement(Wrap, { className: classNames('blockbite-ui__button-group flex flex-wrap gap-1', className, tabs ? 'blockbite-ui__button-group--tabs' : '') }, options.map((option, index) => (React.createElement(WordpressButton, { key: `ButtonToggleGroup__${option.value}__${option.label}__${index}`, className: classNames('blockbite-ui__button--default', {
+            grow: stretch,
+            'justify-center': stretch,
+        }), "aria-label": option.label, showTooltip: true, value: option.value, size: size, label: (option === null || option === void 0 ? void 0 : option.tooltip) || option.label, variant: variant, isPressed: isPressed === option.value, onClick: () => handleButtonClick(option.value) },
+        renderContent(option),
+        option.children && option.children)))));
+});
+//# sourceMappingURL=ButtonToggle.js.map

package/dist/ButtonToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonToggle.js","sourceRoot":"","sources":["../src/ButtonToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,KAAK,KAAK,CAAC;AAqCX,MAAM,CAAC,MAAM,YAAY,GAAgC,IAAI,CAC3D,CAAC,EACC,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,GAAG,WAAW,EACrB,cAAc,EACd,eAAe,EACf,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,MAAM,EAChB,KAAK,GACN,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACtD,uDAAuD;IACzD,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC9B,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,uDAAuD;IACzD,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC;IAEjC,OAAO,CACL,oBAAC,eAAe,kBACF,KAAK,EACjB,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,+BAA+B,CAAC,EACjE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAAW;QAEnB,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI;QAC5B,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACpC,KAAK,IAAI,CAAC,QAAQ,IAAI,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,kCAAO,KAAK,CAAQ,CAAC,CAAC,CAAC,IAAI,CACvD,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAqC,IAAI,CACrE,CAAC,EACC,SAAS,EACT,cAAc,GAAG,EAAE,EACnB,MAAM,GAAG,IAAI,EACb,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,WAAW,EACrB,OAAO,GAAG,KAAK,EACf,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,cAAc,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,cAAc,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAa,EAAE,EAAE;QAChB,MAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5D,YAAY,CAAC,QAAQ,CAAC,CAAC;QACvB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,QAAQ,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,SAAS,EAAE,eAAe,EAAE,MAAM,CAAC,CACrC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,MAAmC,EAAE,EAAE;QAC5D,IAAI,OAAO,KAAK,MAAM,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA,EAAE,CAAC;YACvC,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAAC;QACrC,CAAC;aAAM,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;YAC/B,OAAO,kCAAO,MAAM,CAAC,KAAK,CAAQ,CAAC;QACrC,CAAC;QACD,OAAO,CACL,8BAAM,SAAS,EAAC,wCAAwC;YACrD,MAAM,CAAC,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI;YAC3C,kCAAO,MAAM,CAAC,KAAK,CAAQ,CACtB,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,UAAU,CACnB,iDAAiD,EACjD,SAAS,EACT,IAAI,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,CAC/C,IAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,eAAe,IACd,GAAG,EAAE,sBAAsB,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,KAAK,KAAK,EAAE,EACpE,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE;YACrD,IAAI,EAAE,OAAO;YACb,gBAAgB,EAAE,OAAO;SAC1B,CAAC,gBAEU,MAAM,CAAC,KAAK,EACxB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,KAAK,EACtC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,KAAK,MAAM,CAAC,KAAK,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC;QAE7C,aAAa,CAAC,MAAM,CAAC;QACrB,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CACnB,CACnB,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/Chapter.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 type ChapterProps = {
     children?: React.ReactNode;
     className?: string;
     title?: string;
 };
-export declare const Chapter: ({ children, title }: ChapterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Chapter: ({ children, title }: ChapterProps) => React.JSX.Element;
 export {};