@blockbite/ui 1.0.3 → 1.0.4

package/package.json

@@ -1,186 +1,19 @@
 {
   "name": "@blockbite/ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Shared React UI components for Blockbite apps",
   "author": "Blockbite",
   "license": "MIT",
   "private": false,
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "module": "src/index.js",
   "files": [
-    "dist"
+    "src/components/"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./AutocompleteDropdown": {
-      "import": "./dist/AutocompleteDropdown.js",
-      "types": "./dist/AutocompleteDropdown.d.ts"
-    },
-    "./Badge": {
-      "import": "./dist/Badge.js",
-      "types": "./dist/Badge.d.ts"
-    },
-    "./BitePreview": {
-      "import": "./dist/BitePreview.js",
-      "types": "./dist/BitePreview.d.ts"
-    },
-    "./Button": {
-      "import": "./dist/Button.js",
-      "types": "./dist/Button.d.ts"
-    },
-    "./ButtonToggle": {
-      "import": "./dist/ButtonToggle.js",
-      "types": "./dist/ButtonToggle.d.ts"
-    },
-    "./Chapter": {
-      "import": "./dist/Chapter.js",
-      "types": "./dist/Chapter.d.ts"
-    },
-    "./ChapterDivider": {
-      "import": "./dist/ChapterDivider.js",
-      "types": "./dist/ChapterDivider.d.ts"
-    },
-    "./Checkbox": {
-      "import": "./dist/Checkbox.js",
-      "types": "./dist/Checkbox.d.ts"
-    },
-    "./DisappearingMessage": {
-      "import": "./dist/DisappearingMessage.js",
-      "types": "./dist/DisappearingMessage.d.ts"
-    },
-    "./DropdownPicker": {
-      "import": "./dist/DropdownPicker.js",
-      "types": "./dist/DropdownPicker.d.ts"
-    },
-    "./EmptyState": {
-      "import": "./dist/EmptyState.js",
-      "types": "./dist/EmptyState.d.ts"
-    },
-    "./FloatingPanel": {
-      "import": "./dist/FloatingPanel.js",
-      "types": "./dist/FloatingPanel.d.ts"
-    },
-    "./FocalPointControl": {
-      "import": "./dist/FocalPointControl.js",
-      "types": "./dist/FocalPointControl.d.ts"
-    },
-    "./Icon": {
-      "import": "./dist/Icon.js",
-      "types": "./dist/Icon.d.ts"
-    },
-    "./LinkPicker": {
-      "import": "./dist/LinkPicker.js",
-      "types": "./dist/LinkPicker.d.ts"
-    },
-    "./MediaPicker": {
-      "import": "./dist/MediaPicker.js",
-      "types": "./dist/MediaPicker.d.ts"
-    },
-    "./MetricsControl": {
-      "import": "./dist/MetricsControl.js",
-      "types": "./dist/MetricsControl.d.ts"
-    },
-    "./Modal": {
-      "import": "./dist/Modal.js",
-      "types": "./dist/Modal.d.ts"
-    },
-    "./NewWindowPortal": {
-      "import": "./dist/NewWindowPortal.js",
-      "types": "./dist/NewWindowPortal.d.ts"
-    },
-    "./Notice": {
-      "import": "./dist/Notice.js",
-      "types": "./dist/Notice.d.ts"
-    },
-    "./PasswordInput": {
-      "import": "./dist/PasswordInput.js",
-      "types": "./dist/PasswordInput.d.ts"
-    },
-    "./Popover": {
-      "import": "./dist/Popover.js",
-      "types": "./dist/Popover.d.ts"
-    },
-    "./RangeSlider": {
-      "import": "./dist/RangeSlider.js",
-      "types": "./dist/RangeSlider.d.ts"
-    },
-    "./ResponsiveImage": {
-      "import": "./dist/ResponsiveImage.js",
-      "types": "./dist/ResponsiveImage.d.ts"
-    },
-    "./ResponsiveVideo": {
-      "import": "./dist/ResponsiveVideo.js",
-      "types": "./dist/ResponsiveVideo.d.ts"
-    },
-    "./ScrollList": {
-      "import": "./dist/ScrollList.js",
-      "types": "./dist/ScrollList.d.ts"
-    },
-    "./SectionList": {
-      "import": "./dist/SectionList.js",
-      "types": "./dist/SectionList.d.ts"
-    },
-    "./SelectControlWrapper": {
-      "import": "./dist/SelectControlWrapper.js",
-      "types": "./dist/SelectControlWrapper.d.ts"
-    },
-    "./SingleBlockTypeAppender": {
-      "import": "./dist/SingleBlockTypeAppender.js",
-      "types": "./dist/SingleBlockTypeAppender.d.ts"
-    },
-    "./SlideIn": {
-      "import": "./dist/SlideIn.js",
-      "types": "./dist/SlideIn.d.ts"
-    },
-    "./Spinner": {
-      "import": "./dist/Spinner.js",
-      "types": "./dist/Spinner.d.ts"
-    },
-    "./Tabs": {
-      "import": "./dist/Tabs.js",
-      "types": "./dist/Tabs.d.ts"
-    },
-    "./Tag": {
-      "import": "./dist/Tag.js",
-      "types": "./dist/Tag.d.ts"
-    },
-    "./TextControl": {
-      "import": "./dist/TextControl.js",
-      "types": "./dist/TextControl.d.ts"
-    },
-    "./TextControlLabel": {
-      "import": "./dist/TextControlLabel.js",
-      "types": "./dist/TextControlLabel.d.ts"
-    },
-    "./ToggleGroup": {
-      "import": "./dist/ToggleGroup.js",
-      "types": "./dist/ToggleGroup.d.ts"
-    },
-    "./ToggleSwitch": {
-      "import": "./dist/ToggleSwitch.js",
-      "types": "./dist/ToggleSwitch.d.ts"
-    },
-    "./Wrap": {
-      "import": "./dist/Wrap.js",
-      "types": "./dist/Wrap.d.ts"
-    }
-  },
   "scripts": {
-    "clean": "rm -rf dist",
     "dev": "vite",
-    "preview": "vite preview",
-    "lint": "eslint ./src --ext .ts,.tsx",
-    "type-check": "tsc --noEmit",
-    "types": "tsc --project tsconfig.build.json",
-    "generate:exports": "node generate-exports.js",
-    "build": "npm run clean && vite build && npm run types && npm run generate:exports"
+    "preview": "vite preview"
   },
   "peerDependencies": {
     "@blockbite/icons": "^4.4.7",
@@ -211,5 +44,11 @@
     "blockbite",
     "vite",
     "typescript"
-  ]
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  }
 }

package/dist/AutocompleteDropdown.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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
-};