@blockbite/ui 1.0.0

package/README.md

@@ -0,0 +1,2 @@
+# blockbite-ui
+ 

package/dist/AutocompleteDropdown.d.ts

@@ -0,0 +1,11 @@
+interface OptionPanelDropdownProps {
+    defaultValue: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onPressedChange: (value: string) => void;
+    swatch?: boolean;
+}
+export default function OptionPanelDropdown({ defaultValue, options, swatch, onPressedChange, }: OptionPanelDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AutocompleteDropdown.js

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

package/dist/Badge.d.ts

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

package/dist/Badge.js

@@ -0,0 +1,16 @@
+import { j as m } from "./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
+};

package/dist/BitePreview.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,62 @@
+import { j as r } from "./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);
+  return E(() => {
+    const n = l.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 }) => {
+          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, a]), /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: "render-preview-container",
+      style: { width: "100%", minHeight: "100%" },
+      children: [
+        /* @__PURE__ */ r.jsx(
+          "iframe",
+          {
+            ref: l,
+            title: "Preview",
+            className: "editor-styles-wrapper",
+            width: "100%",
+            height: "100%"
+          }
+        ),
+        o && w(
+          /* @__PURE__ */ r.jsx("div", { className: "b_", children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "b_utils",
+              dangerouslySetInnerHTML: { __html: i }
+            }
+          ) }),
+          o
+        )
+      ]
+    }
+  );
+};
+export {
+  j as default
+};

package/dist/Button.d.ts

@@ -0,0 +1,14 @@
+type ButtonProps = {
+    children?: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+    display?: 'icon' | 'icon-lg' | 'label' | 'auto' | '' | null;
+    onClick?: () => void;
+    label?: string;
+    size?: 'small' | 'default' | 'compact';
+    variant?: 'primary' | 'secondary' | 'link' | 'primary' | 'tertiary';
+    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 {};

package/dist/Button.js

@@ -0,0 +1,52 @@
+import { j as r } from "./node_modules/react/jsx-runtime.js";
+import { Icon as a } from "./Icon.js";
+import { Button as f } from "@wordpress/components";
+import c from "classnames";
+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(
+    f,
+    {
+      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(
+          a,
+          {
+            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
+};

package/dist/ButtonToggle.d.ts

@@ -0,0 +1,36 @@
+type ButtonToggleProps = {
+    children?: React.ReactNode;
+    className?: string;
+    value: string;
+    defaultPressed: string;
+    variant?: 'primary' | 'secondary';
+    size?: 'small' | 'default' | 'compact';
+    icon?: any;
+    display?: 'icon' | 'label' | '' | null;
+    onPressedChange: (value: string) => void;
+    label?: string;
+};
+type ButtonToggleGroupOptionProp = {
+    value: string;
+    label: string;
+    tooltip?: string;
+    icon?: any;
+    children?: React.ReactNode;
+};
+type ButtonToggleGroupProps = {
+    className?: string;
+    options: ButtonToggleGroupOptionProp[];
+    defaultPressed?: string;
+    toggle?: boolean;
+    size?: 'small' | 'default' | 'compact';
+    tabs?: boolean;
+    display?: 'icon' | 'label' | '' | null;
+    variant?: 'primary' | 'secondary';
+    stretch?: boolean;
+    icon?: any;
+    onPressedChange?: (value: string) => void;
+};
+declare const ButtonToggle: React.FC<ButtonToggleProps>;
+declare const ButtonToggleGroup: React.FC<ButtonToggleGroupProps>;
+export default ButtonToggleGroup;
+export { ButtonToggle, ButtonToggleGroup };

package/dist/ButtonToggle.js

@@ -0,0 +1,112 @@
+import { j as s } from "./node_modules/react/jsx-runtime.js";
+import { Icon as d } from "./Icon.js";
+import { Wrap as N } from "./Wrap.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 h from "classnames";
+const E = p(
+  ({
+    children: u,
+    className: c,
+    value: t,
+    variant: o = "secondary",
+    defaultPressed: i,
+    onPressedChange: m,
+    icon: b,
+    size: x = "compact",
+    display: a = "auto",
+    label: l
+  }) => {
+    const [r, n] = g(!1);
+    w(() => {
+      n(i === t);
+    }, [i]);
+    const j = B(() => {
+      n((_) => !_), m(t);
+    }, [r, m]);
+    return /* @__PURE__ */ s.jsxs(
+      k,
+      {
+        "aria-label": l,
+        className: h(c, "blockbite-ui__button--default"),
+        value: t,
+        size: x,
+        label: l,
+        variant: o,
+        showTooltip: !0,
+        isPressed: r,
+        onClick: j,
+        children: [
+          b && /* @__PURE__ */ s.jsx(d, { icon: b }),
+          a !== "icon" ? u : null,
+          l && !u && a !== "icon" ? /* @__PURE__ */ s.jsx("span", { children: l }) : null
+        ]
+      }
+    );
+  }
+), G = p(
+  ({
+    className: u,
+    defaultPressed: c = "",
+    toggle: t = !0,
+    display: o = "auto",
+    options: i,
+    size: m = "compact",
+    tabs: b = !1,
+    variant: x = "secondary",
+    stretch: a = !1,
+    onPressedChange: l
+  }) => {
+    const [r, n] = g(c);
+    w(() => {
+      n(c);
+    }, [c]);
+    const j = B(
+      (e) => {
+        const f = t && r === e ? "" : e;
+        n(f), l?.(f);
+      },
+      [r, l, t]
+    ), _ = (e) => o === "icon" && e?.icon ? /* @__PURE__ */ s.jsx(d, { 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(d, { icon: e.icon }),
+      /* @__PURE__ */ s.jsx("span", { children: e.label })
+    ] });
+    return /* @__PURE__ */ s.jsx(
+      N,
+      {
+        className: h(
+          "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: h("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: r === 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,
+  G as default
+};

package/dist/Chapter.d.ts

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

package/dist/Chapter.js

@@ -0,0 +1,19 @@
+import { j as e } from "./node_modules/react/jsx-runtime.js";
+import { Wrap as r } from "./Wrap.js";
+import s from "classnames";
+const p = ({ children: t, title: m }) => /* @__PURE__ */ e.jsxs(
+  r,
+  {
+    className: s(
+      "text-gray-medium my-2 flex items-center gap-1 text-[12px] font-medium",
+      s
+    ),
+    children: [
+      m && /* @__PURE__ */ e.jsx(r, { className: "font-medium", children: m }),
+      t
+    ]
+  }
+);
+export {
+  p as Chapter
+};

package/dist/ChapterDivider.d.ts

@@ -0,0 +1,8 @@
+type ChapterDividerProps = {
+    id?: string;
+    title?: string;
+    className?: string;
+    help?: string;
+};
+export declare const ChapterDivider: ({ id, title, className, help, }: ChapterDividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ChapterDivider.js

@@ -0,0 +1,17 @@
+import { j as s } from "./node_modules/react/jsx-runtime.js";
+import m from "classnames";
+const i = ({
+  id: l = "",
+  title: a,
+  className: r,
+  help: e
+}) => /* @__PURE__ */ s.jsxs("div", { ...l ? { id: l } : null, className: m("mb-4", r), children: [
+  /* @__PURE__ */ s.jsxs("div", { className: "flex w-full flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ s.jsx("small", { className: "shrink-1 text-[12px]", children: a }),
+    /* @__PURE__ */ s.jsx("span", { className: "h-[1px] w-full bg-easy" })
+  ] }),
+  e && /* @__PURE__ */ s.jsx("small", { className: "w-full shrink-0 text-[12px]", children: e })
+] });
+export {
+  i as ChapterDivider
+};

package/dist/Checkbox.d.ts

@@ -0,0 +1,9 @@
+type CheckboxProps = {
+    id: string;
+    label?: string;
+    help?: string;
+    defaultChecked?: boolean;
+    onCheckedChange: (checked: boolean, id: string) => void;
+};
+export declare const Checkbox: ({ label, help, defaultChecked }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Checkbox.js

@@ -0,0 +1,21 @@
+import { j as r } from "./node_modules/react/jsx-runtime.js";
+import { Wrap as m } from "./Wrap.js";
+import { CheckboxControl as i } from "@wordpress/components";
+import { useState as x, useEffect as n } from "@wordpress/element";
+const f = ({ label: t, help: s, defaultChecked: e }) => {
+  const [c, o] = x(e);
+  return n(() => {
+    o(e);
+  }, [e]), /* @__PURE__ */ r.jsx(m, { className: "blockbite-ui__checkbox mx-1 flex items-center gap-2", children: /* @__PURE__ */ r.jsx(
+    i,
+    {
+      label: t,
+      help: s,
+      checked: c,
+      onChange: o
+    }
+  ) });
+};
+export {
+  f as Checkbox
+};

package/dist/DisappearingMessage.d.ts

@@ -0,0 +1,7 @@
+type DisappearingMessageProps = {
+    duration: number;
+    children: React.ReactNode;
+    trigger: boolean;
+};
+export declare const DisappearingMessage: ({ duration, children, trigger, }: DisappearingMessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DisappearingMessage.js

@@ -0,0 +1,22 @@
+import { j as n } from "./node_modules/react/jsx-runtime.js";
+import { useState as l, useRef as i, useEffect as o } from "@wordpress/element";
+const p = ({
+  duration: t,
+  children: a,
+  trigger: s
+}) => {
+  const [f, r] = l(!1), e = i(!1);
+  return o(() => {
+    e.current = !0;
+  }, []), o(() => {
+    let u = null;
+    return s && !e.current ? (r(!0), u = setTimeout(() => {
+      r(!1);
+    }, t)) : e.current = !1, () => {
+      clearTimeout(u);
+    };
+  }, [s, t]), f && /* @__PURE__ */ n.jsx(n.Fragment, { children: a });
+};
+export {
+  p as DisappearingMessage
+};

package/dist/DropdownPicker.d.ts

@@ -0,0 +1,15 @@
+type DropdownPickerProps = {
+    label?: string;
+    className?: string;
+    defaultValue: string;
+    defaultIcon?: any;
+    options: {
+        icon?: React.ReactElement;
+        label: string;
+        subtitle?: string;
+        value: string;
+    }[];
+    onPressedChange: (value: string | null) => void;
+};
+export declare const DropdownPicker: ({ label, className, defaultValue, defaultIcon, onPressedChange, options, }: DropdownPickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DropdownPicker.js

@@ -0,0 +1,53 @@
+import { j as o } from "./node_modules/react/jsx-runtime.js";
+import p from "./node_modules/@blockbite/icons/dist/ChevronDown.js";
+import { Icon as n } from "./Icon.js";
+import { DropdownMenu as b } from "@wordpress/components";
+import { useState as f, useEffect as v } from "@wordpress/element";
+import x from "classnames";
+const O = ({
+  label: s,
+  className: m,
+  defaultValue: t,
+  defaultIcon: l = p,
+  onPressedChange: c,
+  options: i
+}) => {
+  const [a, r] = f(null);
+  v(() => {
+    r(t);
+  }, [t]);
+  const u = [
+    ...i.map((e) => ({
+      icon: e.icon,
+      label: e.label,
+      title: e.label,
+      value: e.value,
+      onClick: () => {
+        r(e.value), c(e.value);
+      }
+    })),
+    {
+      icon: /* @__PURE__ */ o.jsx(n, { icon: l }),
+      title: "Reset",
+      value: "reset",
+      onClick: () => {
+        r("reset"), c("reset");
+      }
+    }
+  ];
+  return /* @__PURE__ */ o.jsx(
+    b,
+    {
+      controls: u,
+      className: x(
+        "blockbite-ui__dropdown-picker border-primary border",
+        m
+      ),
+      icon: i.find((e) => e.value === a)?.icon || /* @__PURE__ */ o.jsx(n, { icon: l }),
+      label: s || "Select"
+    }
+  );
+};
+export {
+  O as DropdownPicker
+};

package/dist/EmptyState.d.ts

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

package/dist/EmptyState.js

@@ -0,0 +1,18 @@
+import { j as s } from "./node_modules/react/jsx-runtime.js";
+function n({
+  icon: t,
+  title: a,
+  description: m,
+  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 }),
+    e && /* @__PURE__ */ s.jsx("div", { className: "mt-4", children: e })
+  ] }) }) });
+}
+export {
+  n as default
+};

package/dist/FloatingPanel.d.ts

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