@blockbite/ui 2.0.4 → 2.0.6

package/dist/AutocompleteDropdown.d.ts

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

package/dist/AutocompleteDropdown.js

@@ -1,48 +1,48 @@
 import { j as e } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import v from "./packages/icons/jsx/ChevronDown.js";
+import { Pencil1 as v } from "@blockbite/icons";
 import { Dropdown as f, TextControl as j, Button as h } from "@wordpress/components";
-import { useState as p, useEffect as c } from "@wordpress/element";
+import { useState as c, useEffect as p } from "@wordpress/element";
 import n from "classnames";
-import { ButtonToggle as w } from "./ButtonToggle.js";
+import { ButtonToggle as N } from "./ButtonToggle.js";
 import { Wrap as x } from "./Wrap.js";
 function T({
-  defaultValue: t,
+  defaultValue: r,
   options: s,
   swatch: l,
   onPressedChange: u
 }) {
-  const [o, i] = p(""), [d, m] = p([]);
-  return c(() => {
+  const [o, i] = c(""), [d, m] = c([]);
+  return p(() => {
     m(
       s.filter(
-        (r) => r.label.toLowerCase().includes(o.toLowerCase())
+        (t) => t.label.toLowerCase().includes(o.toLowerCase())
       )
     );
-  }, [o, s]), c(() => {
+  }, [o, s]), p(() => {
     i(""), m(s);
-  }, [t, s]), /* @__PURE__ */ e.jsx(
+  }, [r, s]), /* @__PURE__ */ e.jsx(
     f,
     {
       className: "option-panel-dropdown",
       contentClassName: "option-panel-dropdown-content",
       popoverProps: { placement: "bottom-start" },
-      renderToggle: ({ isOpen: r, onToggle: a }) => /* @__PURE__ */ e.jsx(x, { important: !0, children: /* @__PURE__ */ e.jsx(
+      renderToggle: ({ isOpen: t, onToggle: a }) => /* @__PURE__ */ e.jsx(x, { important: !0, children: /* @__PURE__ */ e.jsx(
         h,
         {
           variant: "secondary",
           size: "small",
           onClick: a,
-          "aria-expanded": r,
+          "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-${t}`
+                  `h-3 w-3 rounded-full bg-${r}`
                 )
               }
             ),
-            /* @__PURE__ */ e.jsx("span", { children: t || "Select option…" }),
+            /* @__PURE__ */ e.jsx("span", { children: r || "Select option…" }),
             /* @__PURE__ */ e.jsx(v, {})
           ] })
         }
@@ -53,37 +53,37 @@ function T({
           {
             label: "Search options",
             value: o,
-            onChange: (r) => i(r),
+            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((r, a) => /* @__PURE__ */ e.jsxs(
-            w,
+          d.map((t, a) => /* @__PURE__ */ e.jsxs(
+            N,
             {
               className: n({
-                "bg-primary": r.value
+                "bg-primary": t.value
               }),
               size: "small",
-              value: r.value.toString(),
-              defaultPressed: t,
+              value: t.value.toString(),
+              defaultPressed: r,
               onPressedChange: (g) => {
-                u(g ? r.value : "");
+                u(g ? t.value : "");
               },
               children: [
                 l && /* @__PURE__ */ e.jsx(
                   "div",
                   {
                     className: n(
-                      `mr-3 h-3 w-3 rounded-full bg-${r.value}`
+                      `mr-3 h-3 w-3 rounded-full bg-${t.value}`
                     )
                   }
                 ),
-                r.label
+                t.label
               ]
             },
-            `ButtonToggle__${r.value}___${a}`
+            `ButtonToggle__${t.value}___${a}`
           ))
         ] })
       ] }) })
@@ -91,5 +91,5 @@ function T({
   );
 }
 export {
-  T as default
+  T as AutocompleteDropdown
 };

package/dist/BitePreview.d.ts

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

package/dist/BitePreview.js

@@ -1,15 +1,15 @@
 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: a }) => {
-  const l = h(null), [o, p] = y(null);
+const j = ({ htmlContent: i, cssContent: s, frontendAssets: o }) => {
+  const a = h(null), [l, p] = y(null);
   return E(() => {
-    const n = l.current;
+    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), a.forEach(({ type: d, id: m, url: f }) => {
+        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(
@@ -27,7 +27,7 @@ const j = ({ htmlContent: i, cssContent: s, frontendAssets: a }) => {
     }), () => {
       n && (n.onload = null);
     };
-  }, [i, s, a]), /* @__PURE__ */ r.jsxs(
+  }, [i, s, o]), /* @__PURE__ */ r.jsxs(
     "div",
     {
       className: "render-preview-container",
@@ -36,14 +36,14 @@ const j = ({ htmlContent: i, cssContent: s, frontendAssets: a }) => {
         /* @__PURE__ */ r.jsx(
           "iframe",
           {
-            ref: l,
+            ref: a,
             title: "Preview",
             className: "editor-styles-wrapper",
             width: "100%",
             height: "100%"
           }
         ),
-        o && w(
+        l && w(
           /* @__PURE__ */ r.jsx("div", { className: "b_", children: /* @__PURE__ */ r.jsx(
             "div",
             {
@@ -51,12 +51,12 @@ const j = ({ htmlContent: i, cssContent: s, frontendAssets: a }) => {
               dangerouslySetInnerHTML: { __html: i }
             }
           ) }),
-          o
+          l
         )
       ]
     }
   );
 };
 export {
-  j as default
+  j as BitePreview
 };

package/dist/ButtonToggle.d.ts

@@ -30,7 +30,6 @@ type ButtonToggleGroupProps = {
     icon?: any;
     onPressedChange?: (value: string) => void;
 };
-declare const ButtonToggle: React.FC<ButtonToggleProps>;
-declare const ButtonToggleGroup: React.FC<ButtonToggleGroupProps>;
-export default ButtonToggleGroup;
-export { ButtonToggle, ButtonToggleGroup };
+export declare const ButtonToggle: React.FC<ButtonToggleProps>;
+export declare const ButtonToggleGroup: React.FC<ButtonToggleGroupProps>;
+export {};

package/dist/ButtonToggle.js

@@ -8,7 +8,7 @@ const E = p(
   ({
     children: u,
     className: c,
-    value: t,
+    value: r,
     variant: o = "secondary",
     defaultPressed: i,
     onPressedChange: m,
@@ -17,24 +17,24 @@ const E = p(
     display: a = "auto",
     label: l
   }) => {
-    const [r, n] = g(!1);
+    const [t, n] = g(!1);
     w(() => {
-      n(i === t);
+      n(i === r);
     }, [i]);
     const j = B(() => {
-      n((_) => !_), m(t);
-    }, [r, m]);
+      n((_) => !_), m(r);
+    }, [t, m]);
     return /* @__PURE__ */ s.jsxs(
       k,
       {
         "aria-label": l,
         className: d(c, "blockbite-ui__button--default"),
-        value: t,
+        value: r,
         size: x,
         label: l,
         variant: o,
         showTooltip: !0,
-        isPressed: r,
+        isPressed: t,
         onClick: j,
         children: [
           b && /* @__PURE__ */ s.jsx(h, { icon: b }),
@@ -48,7 +48,7 @@ const E = p(
   ({
     className: u,
     defaultPressed: c = "",
-    toggle: t = !0,
+    toggle: r = !0,
     display: o = "auto",
     options: i,
     size: m = "compact",
@@ -57,16 +57,16 @@ const E = p(
     stretch: a = !1,
     onPressedChange: l
   }) => {
-    const [r, n] = g(c);
+    const [t, n] = g(c);
     w(() => {
       n(c);
     }, [c]);
     const j = B(
       (e) => {
-        const f = t && r === e ? "" : e;
+        const f = r && t === e ? "" : e;
         n(f), l?.(f);
       },
-      [r, l, t]
+      [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 })
@@ -92,7 +92,7 @@ const E = p(
             size: m,
             label: e?.tooltip || e.label,
             variant: x,
-            isPressed: r === e.value,
+            isPressed: t === e.value,
             onClick: () => j(e.value),
             children: [
               _(e),
@@ -107,6 +107,5 @@ const E = p(
 );
 export {
   E as ButtonToggle,
-  G as ButtonToggleGroup,
-  G as default
+  G as ButtonToggleGroup
 };

package/dist/DropdownPicker.js

@@ -1,5 +1,5 @@
 import { j as o } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import p from "./packages/icons/jsx/ChevronDown.js";
+import { ChevronDown as p } from "@blockbite/icons";
 import { DropdownMenu as b } from "@wordpress/components";
 import { useState as f, useEffect as v } from "@wordpress/element";
 import x from "classnames";

package/dist/EmptyState.d.ts

@@ -5,5 +5,5 @@ type Props = {
     children?: React.ReactNode;
     [key: string]: any;
 };
-export default function EmptyState({ icon, title, description, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ icon, title, description, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/EmptyState.js

@@ -1,18 +1,18 @@
 import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
 function n({
   icon: t,
-  title: a,
-  description: m,
+  title: m,
+  description: a,
   children: e = null,
   ...l
 }) {
   return /* @__PURE__ */ s.jsx("div", { ...l, children: /* @__PURE__ */ s.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center text-center !font-sans", children: /* @__PURE__ */ s.jsxs("div", { className: "max-w-sm", children: [
     t && /* @__PURE__ */ s.jsx("div", { className: "mx-auto !text-gray-400", children: t }),
-    /* @__PURE__ */ s.jsx("h3", { className: "text-gray-medium mt-2 !font-sans text-sm font-medium", children: a }),
-    /* @__PURE__ */ s.jsx("p", { className: "mt-1 !font-sans text-sm !text-gray-500", children: m }),
+    /* @__PURE__ */ s.jsx("h3", { className: "text-gray-medium mt-2 !font-sans text-sm font-medium", children: m }),
+    /* @__PURE__ */ s.jsx("p", { className: "mt-1 !font-sans text-sm !text-gray-500", children: a }),
     e && /* @__PURE__ */ s.jsx("div", { className: "mt-4", children: e })
   ] }) }) });
 }
 export {
-  n as default
+  n as EmptyState
 };

package/dist/FloatingPanel.d.ts

@@ -1,7 +1,7 @@
 type DraggablePanelProps = {
     children: React.ReactNode;
 };
-export default function FloatingPanel({ children, }: DraggablePanelProps & {
+export declare function FloatingPanel({ children, }: DraggablePanelProps & {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/FloatingPanel.js

@@ -1,33 +1,33 @@
-import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { useRef as x, useState as o, useEffect as g } from "@wordpress/element";
+import { j as o } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
+import { useRef as x, useState as s, useEffect as g } from "@wordpress/element";
 function w({
-  children: d
+  children: c
 }) {
-  const i = x(null), [r, c] = o({ x: 100, y: 100 }), [a, l] = o(!1), [n, f] = o({ x: 0, y: 0 });
+  const i = x(null), [r, d] = s({ x: 100, y: 100 }), [l, a] = s(!1), [n, f] = s({ x: 0, y: 0 });
   g(() => {
     const e = (u) => {
-      a && c({
+      l && d({
         x: u.clientX - n.x,
         y: u.clientY - n.y
       });
-    }, t = () => l(!1);
+    }, t = () => a(!1);
     return window.addEventListener("mousemove", e), window.addEventListener("mouseup", t), () => {
       window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", t);
     };
-  }, [a, n]);
+  }, [l, n]);
   const m = (e) => {
     const t = i.current.getBoundingClientRect();
-    f({ x: e.clientX - t.left, y: e.clientY - t.top }), l(!0);
+    f({ x: e.clientX - t.left, y: e.clientY - t.top }), a(!0);
   };
-  return /* @__PURE__ */ s.jsx("div", { className: "bb_", children: /* @__PURE__ */ s.jsxs(
+  return /* @__PURE__ */ o.jsx("div", { className: "bb_", children: /* @__PURE__ */ o.jsxs(
     "div",
     {
       ref: i,
       className: "fixed bg-white shadow-xl rounded-2xl p-4 w-[400px] h-[550px] z-[9999]",
       style: { left: r.x, top: r.y },
       children: [
-        d,
-        /* @__PURE__ */ s.jsx(
+        c,
+        /* @__PURE__ */ o.jsx(
           "div",
           {
             className: "absolute top-1 right-1 cursor-move w-5 h-5 bg-gray-300 rounded",
@@ -39,5 +39,5 @@ function w({
   ) });
 }
 export {
-  w as default
+  w as FloatingPanel
 };

package/dist/FocalPointControl.d.ts

@@ -3,5 +3,5 @@ type FocalPointControlProps = {
     onValueChange: (value: string) => void;
     url?: string;
 };
-declare const FocalPointControl: React.FC<FocalPointControlProps>;
+export declare const FocalPointControl: React.FC<FocalPointControlProps>;
 export default FocalPointControl;

package/dist/FocalPointControl.js

@@ -36,5 +36,6 @@ const d = ({
   ) });
 };
 export {
+  d as FocalPointControl,
   d as default
 };

package/dist/LinkPicker.d.ts

@@ -1 +1 @@
-export default function LinkPicker(props: any): import("react/jsx-runtime").JSX.Element;
+export declare function LinkPicker(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/LinkPicker.js

@@ -1,16 +1,16 @@
 import { j as e } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import b from "@wordpress/api-fetch";
-import { TextControl as h } from "@wordpress/components";
+import h from "@wordpress/api-fetch";
+import { TextControl as u } from "@wordpress/components";
 import { useState as c, useEffect as a } from "@wordpress/element";
 import { __ as p } from "@wordpress/i18n";
 import { Wrap as k } from "./Wrap.js";
-function g(s) {
-  const [t, r] = c(""), [i, n] = c([]), [o, u] = c({
+function g(r) {
+  const [t, s] = c(""), [i, n] = c([]), [o, b] = c({
     url: "",
     title: ""
   });
   return a(() => {
-    t !== "" && (n(null), b({
+    t !== "" && (n(null), h({
       path: `/blockbite/v1/block-helpers/get-links/${t}`
     }).then(
       (l) => {
@@ -18,15 +18,15 @@ function g(s) {
       }
     ));
   }, [t]), a(() => {
-    o.url !== "" && s.parentCallback(o);
+    o.url !== "" && r.parentCallback(o);
   }, [o]), /* @__PURE__ */ e.jsxs(k, { className: "blockbite--editor-linkwrap", children: [
     /* @__PURE__ */ e.jsx(
-      h,
+      u,
       {
         label: p("Search link", "blockbitelinks"),
         value: t,
         placeholder: "Example: About",
-        onChange: (l) => r(l),
+        onChange: (l) => s(l),
         help: p("Type a post, page, title", "blockbitelinks")
       }
     ),
@@ -35,17 +35,17 @@ function g(s) {
       {
         links: i,
         onActiveLink: (l) => [
-          u({ ...l }),
-          r("")
+          b({ ...l }),
+          s("")
         ]
       }
     ) }) : null
   ] });
 }
-function m({ links: s, onActiveLink: t }) {
-  const r = [];
-  return s === null ? /* @__PURE__ */ e.jsx("p", { children: "Loading..." }) : s.length === 0 ? /* @__PURE__ */ e.jsx("p", { children: "No Results" }) : (s.forEach((i) => {
-    r.push(
+function m({ links: r, onActiveLink: t }) {
+  const s = [];
+  return r === null ? /* @__PURE__ */ e.jsx("p", { children: "Loading..." }) : r.length === 0 ? /* @__PURE__ */ e.jsx("p", { children: "No Results" }) : (r.forEach((i) => {
+    s.push(
       // add key
       /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsxs(
         "span",
@@ -60,8 +60,8 @@ function m({ links: s, onActiveLink: t }) {
         }
       ) }, i.id)
     );
-  }), r);
+  }), s);
 }
 export {
-  g as default
+  g as LinkPicker
 };

package/dist/MediaPicker.d.ts

@@ -1,4 +1,4 @@
-export default function MediaPicker({ mediaProps, mediaCallback }: {
+export declare function MediaPicker({ mediaProps, mediaCallback }: {
     mediaProps: any;
     mediaCallback: any;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/MediaPicker.js

@@ -1,10 +1,10 @@
 import { j as l } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { MediaUploadCheck as a, MediaUpload as m } from "@wordpress/block-editor";
-import { PanelRow as b, Button as n } from "@wordpress/components";
+import { MediaUploadCheck as n, MediaUpload as m } from "@wordpress/block-editor";
+import { PanelRow as b, Button as a } from "@wordpress/components";
 import { useState as j, useEffect as x } from "@wordpress/element";
 import { __ as r } from "@wordpress/i18n";
-function S({ mediaProps: d, mediaCallback: u }) {
-  const c = [
+function S({ mediaProps: d, mediaCallback: c }) {
+  const u = [
     "image",
     "video",
     "image/svg+xml",
@@ -24,7 +24,7 @@ function S({ mediaProps: d, mediaCallback: u }) {
     d && g({ ...d });
   }, [d]);
   const p = () => {
-    u({ ...{
+    c({ ...{
       mediaId: 0,
       mediaUrl: ""
     } });
@@ -47,17 +47,17 @@ function S({ mediaProps: d, mediaCallback: u }) {
       width: e.width,
       height: e.height
     };
-    u({ ...f });
+    c({ ...f });
   };
   return /* @__PURE__ */ l.jsxs(b, { children: [
-    t.id !== null && /* @__PURE__ */ l.jsx(a, { children: /* @__PURE__ */ l.jsx(
+    t.id !== null && /* @__PURE__ */ l.jsx(n, { children: /* @__PURE__ */ l.jsx(
       m,
       {
         onSelect: h,
         value: t.id,
-        allowedTypes: c,
+        allowedTypes: u,
         render: ({ open: e }) => /* @__PURE__ */ l.jsxs(
-          n,
+          a,
           {
             className: t.id === 0 ? "editor-post-featured-image__toggle" : "editor-post-featured-image__preview",
             onClick: e,
@@ -75,19 +75,19 @@ function S({ mediaProps: d, mediaCallback: u }) {
         )
       }
     ) }),
-    t.id !== 0 && /* @__PURE__ */ l.jsx(a, { children: /* @__PURE__ */ l.jsx(
+    t.id !== 0 && /* @__PURE__ */ l.jsx(n, { children: /* @__PURE__ */ l.jsx(
       m,
       {
         title: r("Replace media", "blockbite"),
         value: t.id,
         onSelect: h,
-        allowedTypes: c,
-        render: ({ open: e }) => /* @__PURE__ */ l.jsx(n, { onClick: e, children: r("Replace media", "blockbite") })
+        allowedTypes: u,
+        render: ({ open: e }) => /* @__PURE__ */ l.jsx(a, { onClick: e, children: r("Replace media", "blockbite") })
       }
     ) }),
-    t.id !== 0 && /* @__PURE__ */ l.jsx(a, { children: /* @__PURE__ */ l.jsx(n, { onClick: () => p(), isDestructive: !0, children: r("Remove media", "blockbite") }) })
+    t.id !== 0 && /* @__PURE__ */ l.jsx(n, { children: /* @__PURE__ */ l.jsx(a, { onClick: () => p(), isDestructive: !0, children: r("Remove media", "blockbite") }) })
   ] });
 }
 export {
-  S as default
+  S as MediaPicker
 };

package/dist/MetricsControl.d.ts

@@ -6,5 +6,5 @@ type MetricsControlProps = {
     onValueChange: (value: string) => void;
     onUnitChange: (unit: string) => void;
 };
-declare const MetricsControl: React.FC<MetricsControlProps>;
+export declare const MetricsControl: React.FC<MetricsControlProps>;
 export default MetricsControl;