@blockbite/ui 1.0.4 → 2.0.0

package/dist/Popover.d.ts

@@ -0,0 +1,12 @@
+type PopoverProps = {
+    children: React.ReactNode;
+    className?: string;
+    defaultValue?: string;
+    value?: string;
+    position?: any;
+    visible?: boolean;
+    onClick?: () => void;
+    onVisibleChange?: (value: boolean) => void;
+};
+export declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/Popover.js

@@ -0,0 +1,48 @@
+import { j as s } from "./node_modules/react/jsx-runtime.js";
+import p from "./node_modules/@blockbite/icons/dist/Cross2.js";
+import { Popover as f, Button as n } from "@wordpress/components";
+import { useState as d, useEffect as x } from "@wordpress/element";
+const N = ({
+  children: c,
+  className: i,
+  position: a,
+  visible: o,
+  onClick: m,
+  onVisibleChange: t
+}) => {
+  const [r, e] = d(!!o);
+  x(() => {
+    o !== void 0 && e(o);
+  }, [o]);
+  const u = () => {
+    const l = !r;
+    e(l), t && t(l);
+  };
+  return /* @__PURE__ */ s.jsx(s.Fragment, { children: r && /* @__PURE__ */ s.jsx(
+    f,
+    {
+      position: a,
+      className: "blockbite-ui__popover bb_",
+      onClick: m,
+      onFocusOutside: () => {
+        e(!1), t && t(!1);
+      },
+      children: /* @__PURE__ */ s.jsx("div", { className: i, children: /* @__PURE__ */ s.jsxs("div", { className: "relative h-full w-full p-4", children: [
+        /* @__PURE__ */ s.jsx(
+          n,
+          {
+            onClick: u,
+            size: "small",
+            className: "close-button absolute right-0 top-0",
+            children: /* @__PURE__ */ s.jsx(p, {})
+          }
+        ),
+        c
+      ] }) })
+    }
+  ) });
+};
+export {
+  N as Popover,
+  N as default
+};

package/dist/RangeSlider.d.ts

@@ -0,0 +1,13 @@
+export type RangeControlType = {
+    defaultValue: string;
+    label: string;
+    min: number;
+    max: number;
+    withInputField?: boolean;
+    onValueChange: (value: string) => void;
+    gridMode?: boolean;
+    showTooltip?: boolean;
+    [key: string]: any;
+};
+declare const RangeControl: React.FC<RangeControlType>;
+export default RangeControl;

package/dist/RangeSlider.js

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

package/dist/ResponsiveImage.d.ts

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

package/dist/ResponsiveImage.js

@@ -0,0 +1,37 @@
+import { j as s } from "./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)
+    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;
+  return /* @__PURE__ */ s.jsxs("picture", { className: "bf_responsive-media", children: [
+    c ? /* @__PURE__ */ s.jsx(
+      "source",
+      {
+        media: "(max-width: 768px)",
+        srcSet: c,
+        className: `bf_media ${e}`
+      }
+    ) : null,
+    a ? /* @__PURE__ */ s.jsx(
+      "source",
+      {
+        media: "(min-width: 1024px)",
+        srcSet: a,
+        className: `bf_media ${e}`
+      }
+    ) : null,
+    l ? /* @__PURE__ */ s.jsx(
+      "source",
+      {
+        media: "(min-width: 1536px)",
+        srcSet: l,
+        className: `bf_media ${e}`
+      }
+    ) : null,
+    a ? /* @__PURE__ */ s.jsx("img", { src: a, alt: i, className: `bf_media ${e}` }) : null
+  ] });
+}
+export {
+  f as default
+};

package/dist/ResponsiveVideo.d.ts

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

package/dist/ResponsiveVideo.js

@@ -0,0 +1,20 @@
+import { j as e } from "./node_modules/react/jsx-runtime.js";
+function a(o) {
+  const { media: s, mediaClass: r } = o, { url: t } = s, n = t;
+  return /* @__PURE__ */ e.jsx(
+    "video",
+    {
+      className: `bf_responsive-media ${r}`,
+      preload: "none",
+      playsInline: !0,
+      controls: !0,
+      autoPlay: !0,
+      muted: !0,
+      loop: !0,
+      children: /* @__PURE__ */ e.jsx("source", { src: n, type: "video/mp4" })
+    }
+  );
+}
+export {
+  a as default
+};

package/dist/ScrollList.d.ts

@@ -0,0 +1,7 @@
+type ScrollListProps = {
+    children: React.ReactNode;
+    className?: string;
+    height?: "small" | "medium" | "large";
+};
+export declare const ScrollList: React.FC<ScrollListProps>;
+export {};

package/dist/ScrollList.js

@@ -0,0 +1,21 @@
+import { j as s } from "./node_modules/react/jsx-runtime.js";
+import { Wrap as m } from "./Wrap.js";
+import a from "classnames";
+const x = ({
+  children: l,
+  className: o = "",
+  height: r = "large"
+}) => /* @__PURE__ */ s.jsx(
+  m,
+  {
+    className: a("scrollbar relative overflow-y-scroll", o, {
+      "h-[400px]": r === "large",
+      "h-[300px]": r === "medium",
+      "h-[200px]": r === "small"
+    }),
+    children: l
+  }
+);
+export {
+  x as ScrollList
+};

package/dist/SectionList.d.ts

@@ -0,0 +1,19 @@
+type SectionTypeProps = {
+    id: string;
+    name: string;
+    ref?: any;
+    code?: string;
+    content?: any;
+};
+type SectionListProps = {
+    sections: SectionTypeProps[];
+    setSections: React.Dispatch<React.SetStateAction<any[]>>;
+    activeSection: any;
+    setActiveSection: any;
+    Update: any;
+    newSection: any;
+    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 default SectionList;

package/dist/SectionList.js

@@ -0,0 +1,122 @@
+import { j as t } from "./node_modules/react/jsx-runtime.js";
+import { Wrap as c } from "./Wrap.js";
+import { Button as u } from "@wordpress/components";
+import { useState as w, useRef as v } from "@wordpress/element";
+import { TextControl as C } from "./TextControl.js";
+import I from "classnames";
+import R from "./node_modules/@blockbite/icons/dist/Plus.js";
+import k from "./node_modules/@blockbite/icons/dist/Trash.js";
+const E = ({
+  sections: n,
+  setSections: o,
+  activeSection: a,
+  setActiveSection: m,
+  Update: x,
+  newSection: s,
+  setCode: f,
+  addons: p
+}) => {
+  const [i, d] = w({
+    id: "",
+    name: ""
+  }), h = v(null), j = () => {
+    const e = { ...s() };
+    o([...n, e]);
+  }, b = () => {
+    if (!a || n.length === 0) return;
+    const e = n.filter(
+      (r) => r.id !== a
+    );
+    let l = null;
+    if (e.length > 0) {
+      const r = n.findIndex((g) => g.id === a), N = Math.min(r, e.length - 1);
+      l = e[N]?.id || e[0]?.id;
+    } else {
+      const r = { ...s() };
+      e.push(r), l = r.id;
+    }
+    o(e), m(l), f(e.find((r) => r.id === l)?.code || "");
+  }, y = (e) => {
+    o(
+      (l) => l.map(
+        (r) => r.id === i.id ? { ...r, name: e } : r
+      )
+    ), d({
+      id: "",
+      name: ""
+    });
+  };
+  return /* @__PURE__ */ t.jsxs(c, { important: !0, className: "w-[200px] border-r", children: [
+    /* @__PURE__ */ t.jsxs("ul", { className: "h-[calc(100%-80px)] divide-y overflow-auto", children: [
+      p,
+      /* @__PURE__ */ t.jsx("li", { children: /* @__PURE__ */ t.jsx("ul", { className: "divide-y border-b", children: n.map((e, l) => /* @__PURE__ */ t.jsxs(
+        "li",
+        {
+          className: "relative m-0",
+          children: [
+            /* @__PURE__ */ t.jsx(
+              "button",
+              {
+                className: I(
+                  "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 === a
+                  }
+                ),
+                onClick: () => {
+                  m(e.id), x(a, e.id);
+                },
+                onDoubleClick: () => {
+                  d({
+                    id: e.id,
+                    name: e.name
+                  });
+                },
+                children: e.name
+              }
+            ),
+            i.id === e.id && /* @__PURE__ */ t.jsx(
+              C,
+              {
+                className: "absolute left-0 top-0 h-full w-full",
+                defaultValue: i.name,
+                onChange: (r) => d({
+                  ...i,
+                  name: r
+                }),
+                ref: h,
+                onBlur: (r) => y(r)
+              }
+            )
+          ]
+        },
+        `section__${l}__${e?.id}`
+      )) }) })
+    ] }),
+    /* @__PURE__ */ t.jsxs(c, { className: "flex justify-center gap-2 p-2", children: [
+      /* @__PURE__ */ t.jsx(
+        u,
+        {
+          onClick: j,
+          icon: /* @__PURE__ */ t.jsx(R, {}),
+          variant: "tertiary",
+          size: "compact",
+          children: "Add"
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        u,
+        {
+          onClick: b,
+          icon: /* @__PURE__ */ t.jsx(k, {}),
+          variant: "tertiary",
+          size: "compact",
+          children: "Remove"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  E as default
+};

package/dist/SelectControlWrapper.d.ts

@@ -0,0 +1,10 @@
+type SelectControlWrapperProps = {
+    className?: string;
+    defaultValue: string;
+    children?: React.ReactNode;
+    options: any[];
+    label?: string;
+    onChange?: (value: string) => void;
+};
+export declare const SelectControlWrapper: ({ onChange, className, defaultValue, options, label, }: SelectControlWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/SelectControlWrapper.js

@@ -0,0 +1,33 @@
+import { j as t } from "./node_modules/react/jsx-runtime.js";
+import { SelectControl as p } from "@wordpress/components";
+import { useState as u, useEffect as m } from "@wordpress/element";
+const j = ({
+  onChange: l,
+  className: a,
+  defaultValue: n,
+  options: e,
+  label: s = ""
+}) => {
+  const [c, o] = u("");
+  m(() => {
+    o(n);
+  }, []);
+  const i = (r) => {
+    o(r), l && l(r);
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: a, children: [
+    e && e.length > 0 && /* @__PURE__ */ t.jsx(
+      p,
+      {
+        label: s || "",
+        value: c || "",
+        onChange: i,
+        options: [{ value: "", label: "Select an option" }, ...e]
+      }
+    ),
+    !e && /* @__PURE__ */ t.jsx("p", { children: "No options available" })
+  ] });
+};
+export {
+  j as SelectControlWrapper
+};

package/dist/SingleBlockTypeAppender.d.ts

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

package/dist/SingleBlockTypeAppender.js

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

package/dist/SlideIn.d.ts

@@ -0,0 +1,7 @@
+type SlideInProps = {
+    children: React.ReactNode;
+    className?: string;
+    watch?: any;
+};
+export declare const SlideIn: ({ children, watch, className }: SlideInProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/SlideIn.js

@@ -0,0 +1,28 @@
+import { j as a } from "./node_modules/react/jsx-runtime.js";
+import { Wrap as i } from "./Wrap.js";
+import { useState as m, useEffect as n } from "@wordpress/element";
+import l from "classnames";
+const c = ({ children: s, watch: e, className: r }) => {
+  const [t, o] = m(0);
+  return n(() => {
+    setTimeout(() => {
+      o(1);
+    }, 250);
+  }, [e]), /* @__PURE__ */ a.jsx(
+    i,
+    {
+      className: l(
+        r,
+        "duration-50 transform transition-all ease-in-out",
+        {
+          "translate-x-0": t === 1,
+          "-translate-x-full": t === 0
+        }
+      ),
+      children: s
+    }
+  );
+};
+export {
+  c as SlideIn
+};

package/dist/Spinner.d.ts

@@ -0,0 +1,7 @@
+type SpinnerProps = {
+    label?: string;
+    className?: string;
+    defaultValue: boolean;
+};
+export declare const Spinner: ({ className, defaultValue }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Spinner.js

@@ -0,0 +1,15 @@
+import { j as o } from "./node_modules/react/jsx-runtime.js";
+import { Spinner as i } from "@wordpress/components";
+import { useState as m, useEffect as n } from "@wordpress/element";
+import a from "classnames";
+const x = ({ className: t, defaultValue: s }) => {
+  const [e, r] = m(!1);
+  return n(() => {
+    setTimeout(() => {
+      r(!1);
+    }, 500), s && r(!0);
+  }, [e, s]), e && /* @__PURE__ */ o.jsx(i, { className: a(t) });
+};
+export {
+  x as Spinner
+};

package/dist/Tabs.d.ts

@@ -0,0 +1,26 @@
+type TabsProps = {
+    className?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children?: React.ReactNode;
+};
+export declare const TabsWrapper: ({ children, defaultValue, value, onValueChange, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+type TabsListProps = {
+    options: {
+        name: string;
+        title: string;
+        icon?: any;
+    }[];
+    children?: React.ReactNode;
+    onValueChange?: (value: string) => void;
+    className?: string;
+};
+export declare const TabsList: ({ options, children, className, onValueChange, }: TabsListProps) => import("react/jsx-runtime").JSX.Element;
+type TabsContentProps = {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const TabsContent: ({ value, children, className, }: TabsContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tabs.js

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

package/dist/Tag.d.ts

@@ -0,0 +1,9 @@
+type TagProps = {
+    children: React.ReactNode;
+    className?: string;
+    color: 'blue' | 'ruby' | 'tomato' | 'red' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'indigo' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'brown' | 'orange' | 'sky' | 'gray';
+    asButton?: boolean;
+    onClick?: () => void;
+};
+export declare const Tag: ({ children, onClick, color, className, }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tag.js

@@ -0,0 +1,11 @@
+import { j as s } from "./node_modules/react/jsx-runtime.js";
+import m from "classnames";
+const n = ({
+  children: r,
+  onClick: t,
+  color: o = "blue",
+  className: e
+}) => /* @__PURE__ */ s.jsx("button", { onClick: t, children: /* @__PURE__ */ s.jsx("div", { color: o, className: m(e), children: r }) });
+export {
+  n as Tag
+};

package/dist/TextControl.d.ts

@@ -0,0 +1,16 @@
+type TextControlProps = {
+    className?: string;
+    inputClassName?: string;
+    defaultValue: any;
+    children?: React.ReactNode;
+    onChange?: (value: string) => void;
+    onClick?: () => void;
+    readOnly?: boolean;
+    placeholder?: string;
+    onBlur?: (value: any) => void;
+    type?: string;
+    label?: string;
+    helper?: string;
+};
+export declare const TextControl: import("react").ForwardRefExoticComponent<TextControlProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/TextControl.js

@@ -0,0 +1,51 @@
+import { j as r } from "./node_modules/react/jsx-runtime.js";
+import { Wrap as j } from "./Wrap.js";
+import { forwardRef as N } from "@wordpress/element";
+import i from "classnames";
+const g = N(
+  ({
+    onClick: t,
+    onChange: o,
+    className: x,
+    defaultValue: l,
+    children: p,
+    inputClassName: d,
+    readOnly: c,
+    placeholder: u,
+    onBlur: s,
+    type: f = "text",
+    label: m,
+    helper: a = ""
+  }, b) => {
+    const n = `text-control-${Math.random().toString(36).substring(2, 15)}`;
+    return /* @__PURE__ */ r.jsxs(j, { className: i("flex items-center p-0", x), children: [
+      m ? /* @__PURE__ */ r.jsx("label", { htmlFor: n, className: "text-primary !m-0 !mb-0 !mr-2", children: m }) : null,
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          id: n,
+          className: i(
+            "border-primary !m-0 !mb-0 h-[32px] !rounded-none border border-opacity-70 focus:outline-none focus:ring-0",
+            d
+          ),
+          type: f,
+          value: l,
+          placeholder: u,
+          onFocus: () => t && t(),
+          onBlur: (e) => {
+            t && t(), s && s(e.target.value);
+          },
+          onChange: (e) => o && o(e.target.value),
+          readOnly: c,
+          ref: b
+        }
+      ),
+      /* @__PURE__ */ r.jsx("span", { children: p }),
+      a && /* @__PURE__ */ r.jsx("p", { className: "text-primary !m-0 !mb-0 text-xs", children: a })
+    ] });
+  }
+);
+g.displayName = "TextControl";
+export {
+  g as TextControl
+};