@blockbite/ui 2.0.5 → 2.0.6

package/dist/MetricsControl.js

@@ -1,73 +1,68 @@
-import { j as e } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
+import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
 import { useState as a, useEffect as d } from "@wordpress/element";
-import h from "./ButtonToggle.js";
-import { DropdownPicker as C } from "./DropdownPicker.js";
-import { Popover as P } from "./Popover.js";
-import w from "./RangeSlider.js";
+import { ButtonToggleGroup as h } from "./ButtonToggle.js";
+import { DropdownPicker as P } from "./DropdownPicker.js";
+import { Popover as C } from "./Popover.js";
+import { RangeSlider as w } from "./RangeSlider.js";
 import { TextControl as N } from "./TextControl.js";
 import { Wrap as k } from "./Wrap.js";
-import O from "./packages/icons/jsx/ColumnSpacing.js";
-import T from "./packages/icons/jsx/Desktop.js";
-import R from "./packages/icons/jsx/Grid.js";
-import G from "./packages/icons/jsx/Percentage.js";
-import A from "./packages/icons/jsx/Slider.js";
-import D from "./packages/icons/jsx/Tailwind.js";
-const L = ({
+import { Tailwind as O, Percentage as T, Grid as R, Desktop as G, Slider as A, ColumnSpacing as D } from "@blockbite/icons";
+const W = ({
   defaultUnit: l,
   defaultValue: n,
   onValueChange: t,
   onUnitChange: g,
   inputClassName: j = "w-[75px]"
 }) => {
-  const [m, c] = a(!1), [v, b] = a([]), [s, f] = a(l), [o, i] = a(""), [x, y] = a(n);
+  const [c, m] = a(!1), [v, b] = a([]), [r, x] = a(l), [o, i] = a(""), [u, S] = a(n);
   d(() => {
-    l && f(l), n && i(n.toString());
+    l && x(l), n && i(n.toString());
   }, [l, n]), d(() => {
-    !m && s === "arbitrary" && y(o);
-  }, [m]);
-  const u = (r) => {
-    if (r !== "arbitrary" && bb?.codex?.units?.spacing?.[r]) {
-      const p = bb.codex.units.spacing[r];
+    !c && r === "arbitrary" && S(o);
+  }, [c]);
+  const f = (e) => {
+    if (e !== "arbitrary" && bb?.codex?.units?.spacing?.[e]) {
+      const p = bb.codex.units.spacing[e];
       b(
         Array.isArray(p) ? p : Object.keys(p)
       );
     } else
       b([]);
-    c(!0);
-  }, S = [
+    m(!0);
+  }, y = [
     {
-      icon: /* @__PURE__ */ e.jsx(D, {}),
+      icon: /* @__PURE__ */ s.jsx(O, {}),
       label: "Tailwind CSS Units",
       value: "native"
     },
-    { icon: /* @__PURE__ */ e.jsx(G, {}), label: "Percentage Units", value: "percent" },
-    { icon: /* @__PURE__ */ e.jsx(R, {}), label: "Grid Units", value: "grid" },
-    { icon: /* @__PURE__ */ e.jsx(T, {}), label: "Screen Units", value: "screen" },
-    { icon: /* @__PURE__ */ e.jsx(A, {}), label: "Pixel Units", value: "arbitrary" },
-    { icon: /* @__PURE__ */ e.jsx(O, {}), label: "Fluid Units", value: "fluid" }
+    { icon: /* @__PURE__ */ s.jsx(T, {}), label: "Percentage Units", value: "percent" },
+    { icon: /* @__PURE__ */ s.jsx(R, {}), label: "Grid Units", value: "grid" },
+    { icon: /* @__PURE__ */ s.jsx(G, {}), label: "Screen Units", value: "screen" },
+    { icon: /* @__PURE__ */ s.jsx(A, {}), label: "Pixel Units", value: "arbitrary" },
+    { icon: /* @__PURE__ */ s.jsx(D, {}), label: "Fluid Units", value: "fluid" }
   ];
-  return /* @__PURE__ */ e.jsx(k, { className: "relative flex flex-col items-baseline", children: /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ s.jsx(k, { className: "relative flex flex-col items-baseline", children: /* @__PURE__ */ s.jsxs(
     N,
     {
       inputClassName: j,
       defaultValue: (
         // Remove the "b_" prefix for grid units
-        s === "grid" ? o.replace("b_", "") : o
+        r === "grid" ? o.replace("b_", "") : o
       ),
-      onClick: () => s !== "arbitrary" && u(s),
-      onChange: (r) => {
-        i(r), t(r);
+      onClick: () => r !== "arbitrary" && f(r),
+      onChange: (e) => {
+        i(e), t(e);
       },
-      readOnly: s !== "arbitrary",
+      readOnly: r !== "arbitrary",
       children: [
-        /* @__PURE__ */ e.jsx(
-          P,
+        /* @__PURE__ */ s.jsx(
+          C,
           {
-            visible: m,
+            visible: c,
             position: "bottom left",
             className: "w-[300px] bg-white shadow-sm",
-            onVisibleChange: c,
-            children: s === "arbitrary" ? /* @__PURE__ */ e.jsx(
+            onVisibleChange: m,
+            children: r === "arbitrary" ? /* @__PURE__ */ s.jsx(
               w,
               {
                 defaultValue: o,
@@ -77,39 +72,39 @@ const L = ({
                 gridMode: !0,
                 showTooltip: !1,
                 allowReset: !0,
-                resetFallbackValue: isNaN(x.toString()) ? 0 : Number(x) / 16,
-                onValueChange: (r) => {
-                  i(r), t(r);
+                resetFallbackValue: isNaN(u.toString()) ? 0 : Number(u) / 16,
+                onValueChange: (e) => {
+                  i(e), t(e);
                 }
               }
-            ) : /* @__PURE__ */ e.jsx(
+            ) : /* @__PURE__ */ s.jsx(
               h,
               {
                 className: "mt-4",
-                options: v.map((r) => ({
-                  value: r,
-                  label: s === "grid" ? r.toString().replace("b_", "") : r,
+                options: v.map((e) => ({
+                  value: e,
+                  label: r === "grid" ? e.toString().replace("b_", "") : e,
                   onClick: () => {
-                    i(r), t(r);
+                    i(e), t(e);
                   }
                 })),
                 size: "small",
                 defaultPressed: o?.toString() || "",
-                onPressedChange: (r) => {
-                  i(r), t(r);
+                onPressedChange: (e) => {
+                  i(e), t(e);
                 }
               }
             )
           }
         ),
-        /* @__PURE__ */ e.jsx(
-          C,
+        /* @__PURE__ */ s.jsx(
+          P,
           {
             className: "h-[32px]",
-            defaultValue: s,
-            options: S,
-            onPressedChange: (r) => {
-              r === "reset" ? (i(""), t(""), c(!1)) : (f(r), g(r), u(r));
+            defaultValue: r,
+            options: y,
+            onPressedChange: (e) => {
+              e === "reset" ? (i(""), t(""), m(!1)) : (x(e), g(e), f(e));
             }
           }
         )
@@ -118,5 +113,6 @@ const L = ({
   ) });
 };
 export {
-  L as default
+  W as MetricsControl,
+  W as default
 };

package/dist/Modal.d.ts

@@ -10,23 +10,23 @@ type ModalProps = {
     title: string;
     className?: string;
 };
-declare const Modal: React.FC<ModalProps>;
-declare const ModalHeader: React.FC<{
+export declare const Modal: React.FC<ModalProps>;
+export declare const ModalHeader: React.FC<{
     children: React.ReactNode;
     className?: string;
 }>;
-declare const ModalFooter: React.FC<{
+export declare const ModalFooter: React.FC<{
     children: React.ReactNode;
     className?: string;
 }>;
-declare const ModalContent: React.FC<{
+export declare const ModalContent: React.FC<{
     children: React.ReactNode;
     className?: string;
 }>;
-declare const ModalClose: React.FC<{
+export declare const ModalClose: React.FC<{
     children: React.ReactNode;
 }>;
-declare const ModalTrigger: React.FC<{
+export declare const ModalTrigger: React.FC<{
     children: React.ReactNode;
 }>;
-export { Modal, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTrigger, };
+export {};

package/dist/Modal.js

@@ -1,9 +1,9 @@
 import { j as r } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { createContext as j, useContext as b, useState as v, useEffect as u, Children as a, isValidElement as l } from "@wordpress/element";
+import { useContext as j, createContext as b, useState as v, useEffect as u, Children as a, isValidElement as l } from "@wordpress/element";
 import { Modal as C } from "@wordpress/components";
 import n from "classnames";
-const i = j(null), d = () => {
-  const e = b(i);
+const i = b(null), d = () => {
+  const e = j(i);
   if (!e)
     throw new Error("useModalContext must be used within a ModalProvider");
   return e;

package/dist/Popover.js

@@ -1,5 +1,5 @@
 import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import p from "./packages/icons/jsx/Cross2.js";
+import { Cross2 as p } from "@blockbite/icons";
 import { Popover as f, Button as n } from "@wordpress/components";
 import { useState as d, useEffect as x } from "@wordpress/element";
 const N = ({

package/dist/RangeSlider.d.ts

@@ -9,5 +9,4 @@ export type RangeControlType = {
     showTooltip?: boolean;
     [key: string]: any;
 };
-declare const RangeControl: React.FC<RangeControlType>;
-export default RangeControl;
+export declare const RangeSlider: React.FC<RangeControlType>;

package/dist/RangeSlider.js

@@ -1,49 +1,49 @@
 import { j as a } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { useState as r, useEffect as h } from "@wordpress/element";
-import { Wrap as j } from "./Wrap.js";
-import { RangeControl as C } from "@wordpress/components";
-const $ = ({
-  defaultValue: t,
+import { useState as o, useEffect as j } from "@wordpress/element";
+import { Wrap as R } from "./Wrap.js";
+import { RangeControl as S } from "@wordpress/components";
+const b = ({
+  defaultValue: s,
   label: l,
-  min: f = 0,
-  max: p = 2e3,
-  withInputField: c = !1,
+  min: p = 0,
+  max: c = 2e3,
+  withInputField: f = !1,
   onValueChange: m,
   gridMode: n = !1,
-  showTooltip: u = !1,
+  showTooltip: i = !1,
   ...x
 }) => {
-  const [i] = r(0), [s, o] = r(0);
-  h(() => {
-    o(Math.round(parseInt(t) / (n ? 16 : 1)));
-  }, [t]);
+  const [u] = o(0), [t, r] = o(0);
+  j(() => {
+    r(Math.round(parseInt(s) / (n ? 16 : 1)));
+  }, [s]);
   function g(e) {
-    const R = e * (n ? 16 : 1);
-    m(R.toString());
+    const h = e * (n ? 16 : 1);
+    m(h.toString());
   }
-  return /* @__PURE__ */ a.jsxs(j, { className: "flex min-w-[240px] flex-col", children: [
+  return /* @__PURE__ */ a.jsxs(R, { className: "flex min-w-[240px] flex-col", children: [
     /* @__PURE__ */ a.jsx(
-      C,
+      S,
       {
         label: l,
-        value: s,
-        min: f,
-        max: p,
-        showTooltip: u,
-        withInputField: c,
+        value: t,
+        min: p,
+        max: c,
+        showTooltip: i,
+        withInputField: f,
         onChange: (e) => {
-          o(e), g(e);
+          r(e), g(e);
         },
-        resetFallbackValue: i,
+        resetFallbackValue: u,
         ...x
       }
     ),
     /* @__PURE__ */ a.jsxs("span", { children: [
-      n ? `${s * 16}px` : null,
+      n ? `${t * 16}px` : null,
       " "
     ] })
   ] });
 };
 export {
-  $ as default
+  b as RangeSlider
 };

package/dist/ResponsiveImage.d.ts

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

package/dist/ResponsiveImage.js

@@ -1,15 +1,15 @@
 import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
 function f(n) {
-  const { media: r, mediaClass: e } = n, { url: m, alt: i, sizes: t } = r;
-  if (t === void 0)
+  const { media: r, mediaClass: e } = n, { url: m, alt: i, sizes: c } = r;
+  if (c === void 0)
     return /* @__PURE__ */ s.jsx("img", { src: m, alt: i, className: `bf_media ${e}` });
-  const { thumbnail: d, medium: u, large: o } = t, c = d || m, a = u || m, l = o || m;
+  const { thumbnail: d, medium: o, large: u } = c, t = d || m, a = o || m, l = u || m;
   return /* @__PURE__ */ s.jsxs("picture", { className: "bf_responsive-media", children: [
-    c ? /* @__PURE__ */ s.jsx(
+    t ? /* @__PURE__ */ s.jsx(
       "source",
       {
         media: "(max-width: 768px)",
-        srcSet: c,
+        srcSet: t,
         className: `bf_media ${e}`
       }
     ) : null,
@@ -33,5 +33,5 @@ function f(n) {
   ] });
 }
 export {
-  f as default
+  f as ResponsiveImage
 };

package/dist/ResponsiveVideo.d.ts

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

package/dist/ResponsiveVideo.js

@@ -1,5 +1,5 @@
 import { j as e } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-function a(o) {
+function u(o) {
   const { media: s, mediaClass: r } = o, { url: t } = s, n = t;
   return /* @__PURE__ */ e.jsx(
     "video",
@@ -16,5 +16,5 @@ function a(o) {
   );
 }
 export {
-  a as default
+  u as ResponsiveVideo
 };

package/dist/SectionList.d.ts

@@ -15,5 +15,5 @@ type SectionListProps = {
     setCode: (code: string) => void;
     addons?: JSX.Element;
 };
-declare const SectionList: ({ sections, setSections, activeSection, setActiveSection, Update, newSection, setCode, addons, }: SectionListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionList: ({ sections, setSections, activeSection, setActiveSection, Update, newSection, setCode, addons, }: SectionListProps) => import("react/jsx-runtime").JSX.Element;
 export default SectionList;

package/dist/SectionList.js

@@ -2,13 +2,12 @@ import { j as t } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx
 import { Button as c } from "@wordpress/components";
 import { useState as w, useRef as v } from "@wordpress/element";
 import { Wrap as u } from "./Wrap.js";
-import C from "classnames";
-import { TextControl as R } from "./TextControl.js";
-import k from "./packages/icons/jsx/Plus.js";
-import _ from "./packages/icons/jsx/Trash.js";
-const E = ({
+import { Plus as C, Trash as R } from "@blockbite/icons";
+import k from "classnames";
+import { TextControl as _ } from "./TextControl.js";
+const D = ({
   sections: a,
-  setSections: o,
+  setSections: d,
   activeSection: n,
   setActiveSection: m,
   Update: x,
@@ -16,12 +15,12 @@ const E = ({
   setCode: f,
   addons: p
 }) => {
-  const [i, d] = w({
+  const [i, o] = w({
     id: "",
     name: ""
   }), h = v(null), j = () => {
     const e = { ...s() };
-    o([...a, e]);
+    d([...a, e]);
   }, b = () => {
     if (!n || a.length === 0) return;
     const e = a.filter(
@@ -35,13 +34,13 @@ const E = ({
       const r = { ...s() };
       e.push(r), l = r.id;
     }
-    o(e), m(l), f(e.find((r) => r.id === l)?.code || "");
+    d(e), m(l), f(e.find((r) => r.id === l)?.code || "");
   }, y = (e) => {
-    o(
+    d(
       (l) => l.map(
         (r) => r.id === i.id ? { ...r, name: e } : r
       )
-    ), d({
+    ), o({
       id: "",
       name: ""
     });
@@ -57,7 +56,7 @@ const E = ({
             /* @__PURE__ */ t.jsx(
               "button",
               {
-                className: C(
+                className: k(
                   "text-gray-medium w-full truncate bg-opacity-50 px-3 py-2 text-left text-sm/6 font-semibold hover:bg-easy hover:text-wordpress",
                   {
                     "bg-easy": e.id === n
@@ -67,7 +66,7 @@ const E = ({
                   m(e.id), x(n, e.id);
                 },
                 onDoubleClick: () => {
-                  d({
+                  o({
                     id: e.id,
                     name: e.name
                   });
@@ -76,11 +75,11 @@ const E = ({
               }
             ),
             i.id === e.id && /* @__PURE__ */ t.jsx(
-              R,
+              _,
               {
                 className: "absolute left-0 top-0 h-full w-full",
                 defaultValue: i.name,
-                onChange: (r) => d({
+                onChange: (r) => o({
                   ...i,
                   name: r
                 }),
@@ -98,7 +97,7 @@ const E = ({
         c,
         {
           onClick: j,
-          icon: /* @__PURE__ */ t.jsx(k, {}),
+          icon: /* @__PURE__ */ t.jsx(C, {}),
           variant: "tertiary",
           size: "compact",
           children: "Add"
@@ -108,7 +107,7 @@ const E = ({
         c,
         {
           onClick: b,
-          icon: /* @__PURE__ */ t.jsx(_, {}),
+          icon: /* @__PURE__ */ t.jsx(R, {}),
           variant: "tertiary",
           size: "compact",
           children: "Remove"
@@ -118,5 +117,6 @@ const E = ({
   ] });
 };
 export {
-  E as default
+  D as SectionList,
+  D as default
 };

package/dist/SingleBlockTypeAppender.d.ts

@@ -1,5 +1,5 @@
 interface SingleBlockTypeAppenderProps {
     buttonText?: string;
 }
-declare const SingleBlockTypeAppender: ({ buttonText, }: SingleBlockTypeAppenderProps) => import("react/jsx-runtime").JSX.Element;
-export default SingleBlockTypeAppender;
+export declare const SingleBlockTypeAppender: ({ buttonText, }: SingleBlockTypeAppenderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/SingleBlockTypeAppender.js

@@ -1,19 +1,19 @@
 import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
 import { createBlock as i } from "@wordpress/blocks";
 import { Button as a } from "@wordpress/components";
-const { select: d, dispatch: k } = wp.data, u = ({
-  buttonText: e = "Add block"
+const { select: k, dispatch: d } = wp.data, u = ({
+  buttonText: c = "Add block"
 }) => {
-  const c = () => {
-    const r = d("core/block-editor").getSelectedBlock(), { clientId: n, innerBlocks: o } = r, t = o[o.length - 1], l = i(
+  const e = () => {
+    const r = k("core/block-editor").getSelectedBlock(), { clientId: n, innerBlocks: o } = r, t = o[o.length - 1], l = i(
       t.name,
       t.attributes,
       t.innerBlocks
     );
-    k("core/block-editor").insertBlocks(l, 0, n);
+    d("core/block-editor").insertBlocks(l, 0, n);
   };
-  return /* @__PURE__ */ s.jsx(a, { variant: "primary", onClick: () => c(), children: e });
+  return /* @__PURE__ */ s.jsx(a, { variant: "primary", onClick: () => e(), children: c });
 };
 export {
-  u as default
+  u as SingleBlockTypeAppender
 };

package/dist/Tabs.d.ts

@@ -23,4 +23,9 @@ type TabsContentProps = {
     className?: string;
 };
 export declare const TabsContent: ({ value, children, className, }: TabsContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: {
+    Wrapper: ({ children, defaultValue, value, onValueChange, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ options, children, className, onValueChange, }: TabsListProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ value, children, className, }: TabsContentProps) => import("react/jsx-runtime").JSX.Element;
+};
 export {};

package/dist/Tabs.js

@@ -1,47 +1,52 @@
 import { j as r } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { TabPanel as p } from "@wordpress/components";
-import { createContext as v, useState as u, useContext as b } from "@wordpress/element";
+import { TabPanel as x } from "@wordpress/components";
+import { useState as v, createContext as u, useContext as b } from "@wordpress/element";
 import d from "classnames";
 import { Wrap as m } from "./Wrap.js";
-const i = v(null), S = ({
+const i = u(null), f = ({
   children: s,
   defaultValue: a,
   value: t,
   onValueChange: e,
-  ...o
+  ...n
 }) => {
-  const n = t !== void 0, [c, T] = u(a || ""), x = {
-    activeTab: n ? t : c,
+  const o = t !== void 0, [c, T] = v(a || ""), p = {
+    activeTab: o ? t : c,
     setActiveTab: (l) => {
-      n || T(l), e && e(l);
+      o || T(l), e && e(l);
     }
   };
-  return /* @__PURE__ */ r.jsx(i.Provider, { value: x, children: /* @__PURE__ */ r.jsx(m, { important: !0, className: o.className, children: s }) });
-}, W = ({
+  return /* @__PURE__ */ r.jsx(i.Provider, { value: p, children: /* @__PURE__ */ r.jsx(m, { important: !0, className: n.className, children: s }) });
+}, j = ({
   options: s,
   children: a,
   className: t,
   onValueChange: e
 }) => {
-  const o = b(i), n = e || o?.setActiveTab;
+  const n = b(i), o = e || n?.setActiveTab;
   return /* @__PURE__ */ r.jsx(
-    p,
+    x,
     {
       className: d("tabs-list", t),
       tabs: s,
       onSelect: (c) => {
-        n(c);
+        o(c);
       },
       children: () => a
     }
   );
-}, E = ({
+}, C = ({
   value: s,
   children: a,
   className: t
-}) => b(i)?.activeTab === s ? /* @__PURE__ */ r.jsx(m, { className: t, children: a }) : null;
+}) => b(i)?.activeTab === s ? /* @__PURE__ */ r.jsx(m, { className: t, children: a }) : null, E = {
+  Wrapper: f,
+  List: j,
+  Content: C
+};
 export {
-  E as TabsContent,
-  W as TabsList,
-  S as TabsWrapper
+  E as Tabs,
+  C as TabsContent,
+  j as TabsList,
+  f as TabsWrapper
 };

package/dist/TextControlLabel.js

@@ -1,5 +1,5 @@
 import { j as t } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import r from "./packages/icons/jsx/Pencil1.js";
+import { Pencil1 as r } from "@blockbite/icons";
 import { TextControl as s } from "@wordpress/components";
 import { Wrap as i } from "./Wrap.js";
 const x = ({

package/dist/ToggleGroup.d.ts

@@ -12,5 +12,5 @@ type ToggleProps = {
     size?: 'small' | 'default' | 'compact';
     onPressedChange: (value: string) => void;
 };
-declare const ToggleGroup: React.FC<ToggleProps>;
-export { ToggleGroup };
+export declare const ToggleGroup: React.FC<ToggleProps>;
+export {};