@behindthemusictree/app-kit-ui 26.1.0 → 28.0.2

package/dist/chunk-VDXUW7PP.js

@@ -1,141 +0,0 @@
-// src/popup/PopupTitle.tsx
-import { X } from "lucide-react";
-import { Button } from "@behindthemusictree/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-function PopupTitle({ title, onClose, isDismissable, icon: Icon }) {
-  return /* @__PURE__ */ jsxs("div", { className: "popup-title flex items-center justify-between bg-black p-4 rounded-t-lg", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      Icon && /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-white" }),
-      /* @__PURE__ */ jsx("h3", { id: "popup-title", className: "text-white font-semibold", children: title })
-    ] }),
-    isDismissable && /* @__PURE__ */ jsx(Button, { onClick: onClose, className: "h-8 w-8 text-white hover:text-white/80", "aria-label": "Close popup", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
-  ] });
-}
-
-// src/popup/PopupButtons.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function PopupButtons({ children, alignment = "center", className = "" }) {
-  const alignmentClasses = {
-    left: "justify-start",
-    center: "justify-center",
-    right: "justify-end"
-  };
-  return /* @__PURE__ */ jsx2("div", { className: `flex gap-3 ${alignmentClasses[alignment]} ${className}`, children });
-}
-
-// src/popup/BasePopup.tsx
-import { createPortal } from "react-dom";
-import { Button as Button2 } from "@behindthemusictree/ui";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var typeClasses = {
-  default: "w-full max-w-lg",
-  success: "w-full max-w-lg",
-  error: "w-full max-w-lg",
-  warning: "w-full max-w-lg",
-  info: "w-full max-w-lg",
-  spotify: "w-full max-w-md",
-  auth: "w-full max-w-md"
-};
-var contentBgClasses = {
-  spotify: "bg-green-500",
-  auth: "bg-gray-800"
-};
-function BasePopup(props) {
-  const {
-    title,
-    children,
-    onClose,
-    type = "default",
-    icon,
-    isDismissable = true,
-    className,
-    fitContent = false,
-    showOkButton = false,
-    showCancelButton = false,
-    okButtonText = "OK",
-    cancelButtonText = "Cancel",
-    onOk,
-    okButtonDisabled = false,
-    onCancel,
-    buttonAlignment = "center",
-    topOffset = 0
-  } = props;
-  const baseClasses = "bg-white rounded-lg";
-  const renderButtons = () => {
-    if (!showOkButton && !showCancelButton) return null;
-    return /* @__PURE__ */ jsx3("div", { className: "mt-4 pt-4 border-t", children: /* @__PURE__ */ jsxs2(PopupButtons, { alignment: buttonAlignment, children: [
-      showCancelButton && /* @__PURE__ */ jsx3(Button2, { onClick: onCancel || onClose || (() => {
-      }), variant: "secondary", children: cancelButtonText }),
-      showOkButton && /* @__PURE__ */ jsx3(Button2, { onClick: onOk || onClose || (() => {
-      }), disabled: okButtonDisabled, children: okButtonText })
-    ] }) });
-  };
-  const popupComponent = /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className: "fixed z-50 flex items-center justify-center bg-transparent",
-      style: {
-        top: topOffset,
-        left: 0,
-        right: 0,
-        bottom: 0
-      },
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": "popup-title",
-      children: /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: `${baseClasses} ${fitContent ? typeClasses[type].replace("w-full", "w-fit") : typeClasses[type]} ${className || ""}`,
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsx3(PopupTitle, { title, onClose: onClose ?? (() => {
-            }), isDismissable, icon }),
-            /* @__PURE__ */ jsxs2("div", { className: `popup-content rounded-b-lg p-4 ${contentBgClasses[type] ?? ""}`, children: [
-              children,
-              renderButtons()
-            ] })
-          ]
-        }
-      )
-    }
-  );
-  return createPortal(popupComponent, document.body);
-}
-var BasePopup_default = BasePopup;
-
-// src/popup/InternalErrorPopup.tsx
-import { AlertTriangle, AlertCircle } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function InternalErrorPopup({ errorCode, contactEmail, ...rest }) {
-  return /* @__PURE__ */ jsx4(
-    BasePopup,
-    {
-      ...rest,
-      title: "Internal Error",
-      isDismissable: false,
-      icon: AlertTriangle,
-      children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
-        /* @__PURE__ */ jsx4(AlertCircle, { className: "h-16 w-16 text-[var(--color-red-500)]", strokeWidth: 1.5 }),
-        /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsxs3("p", { className: "text-center text-[var(--color-neutral-600)]", children: [
-          "Please try again. If the problem persists, contact us at",
-          " ",
-          /* @__PURE__ */ jsx4("a", { href: `mailto:${contactEmail}`, className: "text-[var(--color-primary)] hover:text-[var(--color-primary-hover)]", children: contactEmail })
-        ] }) }),
-        errorCode && /* @__PURE__ */ jsxs3("div", { className: "text-sm text-[var(--color-neutral-500)] bg-[var(--color-neutral-100)] p-3 rounded-lg border border-[var(--color-neutral-100)]", children: [
-          "Error Code: ",
-          errorCode
-        ] })
-      ] })
-    }
-  );
-}
-
-export {
-  PopupTitle,
-  PopupButtons,
-  BasePopup,
-  BasePopup_default,
-  InternalErrorPopup
-};
-//# sourceMappingURL=chunk-VDXUW7PP.js.map

package/dist/chunk-VDXUW7PP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/popup/PopupTitle.tsx","../src/popup/PopupButtons.tsx","../src/popup/BasePopup.tsx","../src/popup/InternalErrorPopup.tsx"],"sourcesContent":["\"use client\";\n\nimport { X } from \"lucide-react\";\nimport { Button } from \"@behindthemusictree/ui\";\nimport { LucideIcon } from \"lucide-react\";\n\ninterface PopupTitleProps {\n  title: string;\n  onClose: () => void;\n  isDismissable?: boolean;\n  icon?: LucideIcon;\n}\n\nexport function PopupTitle({ title, onClose, isDismissable, icon: Icon }: PopupTitleProps) {\n  return (\n    <div className=\"popup-title flex items-center justify-between bg-black p-4 rounded-t-lg\">\n      <div className=\"flex items-center gap-2\">\n        {Icon && <Icon className=\"h-5 w-5 text-white\" />}\n        <h3 id=\"popup-title\" className=\"text-white font-semibold\">\n          {title}\n        </h3>\n      </div>\n      {isDismissable && (\n        <Button onClick={onClose} className=\"h-8 w-8 text-white hover:text-white/80\" aria-label=\"Close popup\">\n          <X className=\"h-4 w-4\" />\n        </Button>\n      )}\n    </div>\n  );\n}\n","\"use client\";\n\nimport { ReactNode } from \"react\";\n\ninterface PopupButtonsProps {\n  children: ReactNode;\n  alignment?: \"left\" | \"center\" | \"right\";\n  className?: string;\n}\n\nexport function PopupButtons({ children, alignment = \"center\", className = \"\" }: PopupButtonsProps) {\n  const alignmentClasses = {\n    left: \"justify-start\",\n    center: \"justify-center\",\n    right: \"justify-end\",\n  };\n\n  return <div className={`flex gap-3 ${alignmentClasses[alignment]} ${className}`}>{children}</div>;\n}\n","\"use client\";\n\nimport { createPortal } from \"react-dom\";\nimport { ReactNode } from \"react\";\nimport { PopupTitle } from \"./PopupTitle\";\nimport { PopupButtons } from \"./PopupButtons\";\nimport { Button } from \"@behindthemusictree/ui\";\nimport { LucideIcon } from \"lucide-react\";\n\nexport interface BasePopupProps {\n  title: string;\n  children: ReactNode;\n  onClose?: () => void;\n  type?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"spotify\" | \"auth\";\n  icon?: LucideIcon;\n  isDismissable?: boolean;\n  className?: string;\n  /** Sizes the popup to its content (up to the type's max width) instead of filling it. */\n  fitContent?: boolean;\n  contentClassName?: string;\n  showOkButton?: boolean;\n  showCancelButton?: boolean;\n  okButtonText?: string;\n  okButtonDisabled?: boolean;\n  cancelButtonText?: string;\n  onOk?: () => void;\n  onCancel?: () => void;\n  buttonAlignment?: \"left\" | \"center\" | \"right\";\n  /**\n   * Distance (in px) reserved at the top of the viewport, e.g. for a fixed app header/banner.\n   * Each consuming app passes its own value. Defaults to 0.\n   */\n  topOffset?: number;\n}\n\nconst typeClasses: Record<string, string> = {\n  default: \"w-full max-w-lg\",\n  success: \"w-full max-w-lg\",\n  error: \"w-full max-w-lg\",\n  warning: \"w-full max-w-lg\",\n  info: \"w-full max-w-lg\",\n  spotify: \"w-full max-w-md\",\n  auth: \"w-full max-w-md\",\n};\n\nconst contentBgClasses: Record<string, string> = {\n  spotify: \"bg-green-500\",\n  auth: \"bg-gray-800\",\n};\n\nexport function BasePopup(props: BasePopupProps) {\n  const {\n    title,\n    children,\n    onClose,\n    type = \"default\",\n    icon,\n    isDismissable = true,\n    className,\n    fitContent = false,\n    showOkButton = false,\n    showCancelButton = false,\n    okButtonText = \"OK\",\n    cancelButtonText = \"Cancel\",\n    onOk,\n    okButtonDisabled = false,\n    onCancel,\n    buttonAlignment = \"center\",\n    topOffset = 0,\n  } = props;\n\n  const baseClasses = \"bg-white rounded-lg\";\n\n  const renderButtons = () => {\n    if (!showOkButton && !showCancelButton) return null;\n\n    return (\n      <div className=\"mt-4 pt-4 border-t\">\n        <PopupButtons alignment={buttonAlignment}>\n          {showCancelButton && (\n            <Button onClick={onCancel || onClose || (() => {})} variant=\"secondary\">\n              {cancelButtonText}\n            </Button>\n          )}\n          {showOkButton && (\n            <Button onClick={onOk || onClose || (() => {})} disabled={okButtonDisabled}>\n              {okButtonText}\n            </Button>\n          )}\n        </PopupButtons>\n      </div>\n    );\n  };\n\n  const popupComponent = (\n    <div\n      className=\"fixed z-50 flex items-center justify-center bg-transparent\"\n      style={{\n        top: topOffset,\n        left: 0,\n        right: 0,\n        bottom: 0,\n      }}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"popup-title\"\n    >\n      <div\n        className={`${baseClasses} ${fitContent ? typeClasses[type].replace(\"w-full\", \"w-fit\") : typeClasses[type]} ${className || \"\"}`}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <PopupTitle title={title} onClose={onClose ?? (() => {})} isDismissable={isDismissable} icon={icon} />\n        <div className={`popup-content rounded-b-lg p-4 ${contentBgClasses[type] ?? \"\"}`}>\n          {children}\n          {renderButtons()}\n        </div>\n      </div>\n    </div>\n  );\n\n  return createPortal(popupComponent, document.body);\n}\n\nexport default BasePopup;\n","\"use client\";\n\nimport { AlertTriangle, AlertCircle } from \"lucide-react\";\nimport { BasePopup, BasePopupProps } from \"./BasePopup\";\nimport { ErrorCode } from \"@behindthemusictree/app-kit/transport\";\n\ntype InternalErrorPopupProps = Omit<BasePopupProps, \"title\" | \"children\" | \"icon\" | \"isDismissable\"> & {\n  errorCode: ErrorCode;\n  /**\n   * Support contact email shown in the \"if the problem persists\" message. Passed by the\n   * consuming app (from whatever env var / config it uses) so this package doesn't assume a\n   * specific env var name.\n   */\n  contactEmail?: string | null;\n};\n\nexport default function InternalErrorPopup({ errorCode, contactEmail, ...rest }: InternalErrorPopupProps) {\n  return (\n    <BasePopup\n      {...rest}\n      title=\"Internal Error\"\n      isDismissable={false}\n      icon={AlertTriangle}\n      children={\n        <div className=\"flex flex-col items-center space-y-6 py-4\">\n          <AlertCircle className=\"h-16 w-16 text-[var(--color-red-500)]\" strokeWidth={1.5} />\n          <div>\n            <p className=\"text-center text-[var(--color-neutral-600)]\">\n              Please try again. If the problem persists, contact us at{\" \"}\n              <a href={`mailto:${contactEmail}`} className=\"text-[var(--color-primary)] hover:text-[var(--color-primary-hover)]\">\n                {contactEmail}\n              </a>\n            </p>\n          </div>\n          {errorCode && (\n            <div className=\"text-sm text-[var(--color-neutral-500)] bg-[var(--color-neutral-100)] p-3 rounded-lg border border-[var(--color-neutral-100)]\">\n              Error Code: {errorCode}\n            </div>\n          )}\n        </div>\n      }\n    />\n  );\n}\n"],"mappings":"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","names":["jsx","Button","jsx","jsxs","jsx","jsxs"]}