@kjaniec-dev/ui 0.9.0 → 0.9.2

package/README.md

@@ -20,6 +20,8 @@ Runtime deps: `class-variance-authority`, `clsx`, `tailwind-merge`.
 In your app's global stylesheet, import the design tokens (Tailwind v4 `@theme`) and the small runtime stylesheet that ships keyframes + the slider thumb:
 
 ```css
+@import "tailwindcss";
+@source "../node_modules/@kjaniec-dev/ui";
 @import "@kjaniec-dev/design/tailwind.css";
 @import "@kjaniec-dev/ui/ui.css";
 ```

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var clsx = require('clsx');
@@ -1177,7 +1178,7 @@ var BottomNavigation = React52__namespace.forwardRef(
 );
 BottomNavigation.displayName = "BottomNavigation";
 var TableWrap = React52__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-x-auto w-full", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full max-w-full overflow-x-auto border border-border rounded-kj-lg", className), ...props })
 );
 TableWrap.displayName = "TableWrap";
 var Table = React52__namespace.forwardRef(
@@ -1332,7 +1333,7 @@ function Modal({ open, onClose, children, width = 440, className, showClose = tr
           tabIndex: -1,
           style: { maxWidth: width },
           className: cn(
-            "relative w-full p-7 rounded-kj-2xl bg-surface border border-border shadow-kj-lg transition-transform duration-200 outline-none",
+            "relative w-full p-7 rounded-kj-2xl bg-surface text-foreground border border-border shadow-kj-lg transition-transform duration-200 outline-none",
             open ? "scale-100 translate-y-0" : "scale-95 translate-y-2",
             className
           ),
@@ -1356,7 +1357,7 @@ function Modal({ open, onClose, children, width = 440, className, showClose = tr
 }
 function ModalTitle({ className, id, children, ...props }) {
   const ctx = React52__namespace.useContext(ModalContext);
-  return /* @__PURE__ */ jsxRuntime.jsx("h3", { id: id ?? ctx?.titleId, className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { id: id ?? ctx?.titleId, className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em] text-foreground", className), ...props, children });
 }
 function ModalDescription({ className, id, ...props }) {
   const ctx = React52__namespace.useContext(ModalContext);
@@ -1647,7 +1648,7 @@ function DataTable({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4 w-full", className), children: [
     toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3", children: toolbar }),
-    /* @__PURE__ */ jsxRuntime.jsxs(TableWrap, { className: "relative overflow-hidden", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TableWrap, { className: "relative overflow-x-auto overflow-y-hidden [scroll-behavior:smooth] [-webkit-overflow-scrolling:touch]", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
           isSelectionActive && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-12 px-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3495,7 +3496,7 @@ function isBetweenExclusive(d, lo, hi) {
   return t > startOfDay(lo).getTime() && t < startOfDay(hi).getTime();
 }
 var RangeCalendar = React52__namespace.forwardRef(
-  function RangeCalendar2({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, min, max, disabledDates, className }, ref) {
+  function RangeCalendar2({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, min, max, disabledDates, singleMonth, className }, ref) {
     const controlled = value !== void 0;
     const [internalValue, setInternalValue] = React52__namespace.useState(defaultValue ?? {});
     const range2 = controlled ? value : internalValue;
@@ -3583,12 +3584,13 @@ var RangeCalendar = React52__namespace.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: direction === "prev" ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) })
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex gap-6 select-none", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[280px]", children: [
+    const showSingleMonth = singleMonth;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col sm:flex-row gap-4 sm:gap-6 select-none max-w-full overflow-hidden", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full sm:w-[280px]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
           navButton("prev"),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(leftMonth) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[26px]", "aria-hidden": "true" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: showSingleMonth ? "" : "sm:hidden", children: navButton("next") })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           CalendarGrid,
@@ -3602,7 +3604,7 @@ var RangeCalendar = React52__namespace.forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[280px]", children: [
+      !showSingleMonth && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:block w-[280px]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[26px]", "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(rightMonth) }),
@@ -3749,7 +3751,7 @@ var DateRangePicker = React52__namespace.forwardRef(
         "div",
         {
           onKeyDown: onPanelKeyDown,
-          className: "absolute z-40 top-[calc(100%+6px)] left-0 bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
+          className: "absolute z-40 top-[calc(100%+6px)] left-0 sm:left-auto right-0 sm:right-auto max-w-[calc(100vw-2rem)] bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
           children: /* @__PURE__ */ jsxRuntime.jsx(RangeCalendar, { value: selected, onChange: handleRangeChange, min, max, disabledDates })
         }
       )
@@ -4232,7 +4234,7 @@ function useStepper({ initialStep = 0, stepsCount }) {
 var StepperContext = React52__namespace.createContext(null);
 var StepperItemContext = React52__namespace.createContext(null);
 var Stepper = React52__namespace.forwardRef(
-  ({ value, defaultValue, onValueChange, orientation = "horizontal", linear = true, children, className, ...props }, ref) => {
+  ({ value, defaultValue, onValueChange, orientation = "horizontal", responsive = true, linear = true, children, className, ...props }, ref) => {
     const [localValue, setLocalValue] = React52__namespace.useState(defaultValue ?? 0);
     const isControlled = value !== void 0;
     const activeStep = isControlled ? value : localValue;
@@ -4264,6 +4266,7 @@ var Stepper = React52__namespace.forwardRef(
       () => ({
         activeStep,
         orientation,
+        responsive,
         linear,
         setStep,
         completedSteps,
@@ -4271,7 +4274,7 @@ var Stepper = React52__namespace.forwardRef(
         unregisterStep,
         steps
       }),
-      [activeStep, orientation, linear, setStep, completedSteps, registerStep, unregisterStep, steps]
+      [activeStep, orientation, responsive, linear, setStep, completedSteps, registerStep, unregisterStep, steps]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -4313,16 +4316,15 @@ var StepperList = React52__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
     const ctx = React52__namespace.useContext(StepperContext);
     if (!ctx) throw new Error("StepperList must be used within a Stepper");
+    const isResponsiveHorizontal = ctx.orientation === "horizontal" && (ctx.responsive ?? true);
+    const orientationClass = isResponsiveHorizontal ? "flex flex-col sm:flex-row items-start sm:items-center justify-between w-full relative gap-4" : ctx.orientation === "horizontal" ? "flex items-center justify-between w-full relative gap-4" : "flex flex-col items-start gap-6 relative w-full";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         role: "tablist",
         "aria-orientation": ctx.orientation,
-        className: cn(
-          ctx.orientation === "horizontal" ? "flex items-center justify-between w-full relative gap-4" : "flex flex-col items-start gap-6 relative w-full",
-          className
-        ),
+        className: cn(orientationClass, className),
         ...props,
         children
       }
@@ -4340,13 +4342,14 @@ var StepperItem = React52__namespace.forwardRef(
       return () => unregisterStep(value);
     }, [value, registerStep, unregisterStep]);
     const isLast = ctx.steps[ctx.steps.length - 1] === value;
+    const isResponsiveHorizontal = ctx.orientation === "horizontal" && (ctx.responsive ?? true);
     return /* @__PURE__ */ jsxRuntime.jsx(StepperItemContext.Provider, { value: { value, disabled, isLast }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: cn(
           "group relative flex items-center gap-3 z-10",
-          ctx.orientation === "vertical" ? "flex items-start w-full" : "",
+          ctx.orientation === "vertical" ? "flex items-start w-full" : isResponsiveHorizontal ? "w-full sm:w-auto items-start sm:items-center" : "",
           className
         ),
         ...props,
@@ -4360,12 +4363,13 @@ var StepperSeparator = React52__namespace.forwardRef(
   ({ className, ...props }, ref) => {
     const ctx = React52__namespace.useContext(StepperContext);
     if (!ctx) throw new Error("StepperSeparator must be used within a Stepper");
+    const isResponsiveHorizontal = ctx.orientation === "horizontal" && (ctx.responsive ?? true);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: cn(
-          ctx.orientation === "horizontal" ? "flex-1 h-[2px] bg-border transition-all duration-300" : "w-[2px] bg-border absolute left-[17px] top-8 bottom-0 -ml-px z-0",
+          isResponsiveHorizontal ? "hidden sm:block flex-1 h-[2px] bg-border transition-all duration-300" : ctx.orientation === "horizontal" ? "flex-1 h-[2px] bg-border transition-all duration-300" : "w-[2px] bg-border absolute left-[17px] top-8 bottom-0 -ml-px z-0",
           className
         ),
         ...props
@@ -4548,6 +4552,16 @@ var AppShellHeader = React52__namespace.forwardRef(
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [mobileOpen]);
+    React52__namespace.useEffect(() => {
+      if (mobileOpen) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [mobileOpen]);
     const positionClass = {
       sticky: "sticky top-0 z-40",
       fixed: "fixed top-0 left-0 right-0 z-40",
@@ -4641,7 +4655,7 @@ var AppShellMain = React52__namespace.forwardRef(
       "main",
       {
         ref,
-        className: cn("flex-1", padded && "px-4 sm:px-6 lg:px-8 py-8 md:py-12", widthClass, className),
+        className: cn("flex-1", padded && "px-4 sm:px-6 lg:px-8 py-4 sm:py-6 md:py-12", widthClass, className),
         ...props,
         children
       }
@@ -4679,6 +4693,7 @@ var AppShell = React52__namespace.forwardRef(
     headerVariant = "glass",
     paddedContent = true,
     mobileNav,
+    bottomNav,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4691,7 +4706,8 @@ var AppShell = React52__namespace.forwardRef(
           banner && /* @__PURE__ */ jsxRuntime.jsx(AppShellBanner, { children: banner }),
           header && /* @__PURE__ */ jsxRuntime.jsx(AppShellHeader, { variant: headerVariant, position: headerPosition, mobileNav, children: header }),
           /* @__PURE__ */ jsxRuntime.jsx(AppShellMain, { width: contentWidth, padded: paddedContent, children }),
-          footer && /* @__PURE__ */ jsxRuntime.jsx(AppShellFooter, { children: footer })
+          footer && /* @__PURE__ */ jsxRuntime.jsx(AppShellFooter, { children: footer }),
+          bottomNav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden sticky bottom-0 z-30 w-full bg-surface border-t border-border", children: bottomNav })
         ]
       }
     );
@@ -5534,6 +5550,7 @@ function InboxContent({
   viewAllHref,
   viewAllLabel = "View all notifications",
   emptyState,
+  align = "auto",
   width = 360,
   maxHeight = 320,
   className
@@ -5553,6 +5570,11 @@ function InboxContent({
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "All caught up" }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "No new notifications" })
   ] });
+  const alignClass = {
+    start: "left-0 top-[calc(100%+6px)]",
+    end: "right-0 top-[calc(100%+6px)]",
+    auto: "right-0 sm:right-0 left-auto top-[calc(100%+6px)] max-sm:left-1/2 max-sm:-translate-x-1/2"
+  }[align ?? "auto"];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5560,11 +5582,12 @@ function InboxContent({
       role: "dialog",
       "aria-label": "Notifications",
       tabIndex: -1,
-      style: { width },
+      style: { width: typeof width === "number" ? `${width}px` : width },
       className: cn(
-        "absolute right-0 top-[calc(100%+6px)] z-40",
+        "absolute z-40 max-w-[calc(100vw-1.5rem)]",
         "bg-surface border border-border rounded-kj-md shadow-kj-lg outline-none",
         "animate-[kjpop_.12s_ease]",
+        alignClass,
         className
       ),
       children: [
@@ -6080,6 +6103,385 @@ function ImageGallery({
     )
   ] });
 }
+var OFFICIAL_SCRIPT_URL = "https://geowidget.easypack24.net/js/sdk-for-javascript.js";
+var OFFICIAL_CSS_URL = "https://geowidget.easypack24.net/css/easypack.css";
+var scriptPromise = null;
+function useInPostScript(options = {}) {
+  const [isLoaded, setIsLoaded] = React52.useState(() => {
+    if (typeof window === "undefined") return false;
+    return !!(window.customElements?.get("inpost-geowidget") || window.easyPack);
+  });
+  const [error, setError] = React52.useState(null);
+  const scriptUrl = options.customScriptUrl || OFFICIAL_SCRIPT_URL;
+  const cssUrl = options.customCssUrl || OFFICIAL_CSS_URL;
+  React52.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.customElements?.get("inpost-geowidget") || window.easyPack) {
+      return;
+    }
+    let linkTag = document.querySelector(`link[href="${cssUrl}"]`);
+    if (!linkTag) {
+      linkTag = document.createElement("link");
+      linkTag.rel = "stylesheet";
+      linkTag.href = cssUrl;
+      linkTag.type = "text/css";
+      document.head.appendChild(linkTag);
+    }
+    if (!scriptPromise) {
+      scriptPromise = new Promise((resolve, reject) => {
+        let scriptTag = document.querySelector(`script[src="${scriptUrl}"]`);
+        if (!scriptTag) {
+          scriptTag = document.createElement("script");
+          scriptTag.src = scriptUrl;
+          scriptTag.async = true;
+          document.head.appendChild(scriptTag);
+        }
+        scriptTag.addEventListener("load", () => resolve());
+        scriptTag.addEventListener(
+          "error",
+          (err) => reject(err instanceof Error ? err : new Error("Failed to load InPost GeoWidget SDK script"))
+        );
+      });
+    }
+    scriptPromise.then(async () => {
+      if (typeof window !== "undefined" && window.customElements?.whenDefined) {
+        try {
+          await Promise.race([
+            window.customElements.whenDefined("inpost-geowidget"),
+            new Promise((r) => setTimeout(r, 100))
+          ]);
+        } catch {
+        }
+      }
+      setIsLoaded(true);
+    }).catch((err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    });
+  }, [scriptUrl, cssUrl]);
+  return { isLoaded, error };
+}
+var MOCK_POINTS = [
+  {
+    name: "WAW01M",
+    address: { line1: "ul. Towarowa 5", line2: "00-838 Warszawa" },
+    address_details: { city: "Warszawa", street: "Towarowa", building_number: "5", post_code: "00-838" },
+    location: { latitude: 52.2297, longitude: 21.0122 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "Przy stacji benzynowej BP"
+  },
+  {
+    name: "KRA02N",
+    address: { line1: "ul. Floria\u0144ska 12", line2: "31-021 Krak\xF3w" },
+    address_details: { city: "Krak\xF3w", street: "Floria\u0144ska", building_number: "12", post_code: "31-021" },
+    location: { latitude: 50.0647, longitude: 19.945 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "Obok wej\u015Bcia do sklepu"
+  },
+  {
+    name: "GDA03P",
+    address: { line1: "ul. D\u0142uga 8", line2: "80-827 Gda\u0144sk" },
+    address_details: { city: "Gda\u0144sk", street: "D\u0142uga", building_number: "8", post_code: "80-827" },
+    location: { latitude: 54.352, longitude: 18.6466 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "R\xF3g ulicy D\u0142ugiej i Tkackiej"
+  },
+  {
+    name: "POZ04S",
+    address: { line1: "ul. P\xF3\u0142wiejska 42", line2: "61-888 Pozna\u0144" },
+    address_details: { city: "Pozna\u0144", street: "P\xF3\u0142wiejska", building_number: "42", post_code: "61-888" },
+    location: { latitude: 52.4064, longitude: 16.9252 },
+    type: ["parcel_locker"],
+    status: "Operating",
+    location_description: "Przy centrum handlowym Stary Browar"
+  }
+];
+var InPostGeowidget = ({
+  token,
+  language = "pl",
+  config = "parcelCollect",
+  sandbox = false,
+  onPointSelect,
+  onReady,
+  onError,
+  className,
+  style,
+  customScriptUrl,
+  customCssUrl
+}) => {
+  const { isLoaded, error } = useInPostScript({
+    customScriptUrl,
+    customCssUrl
+  });
+  const [searchQuery, setSearchQuery] = React52.useState("");
+  const [selectedMock, setSelectedMock] = React52.useState(null);
+  const widgetRef = React52.useRef(null);
+  const callbackNameRef = React52.useRef(`inpost_cb_${Math.random().toString(36).substring(2, 9)}`);
+  React52.useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+  React52.useEffect(() => {
+    if (isLoaded && onReady) {
+      onReady();
+    }
+  }, [isLoaded, onReady]);
+  React52.useEffect(() => {
+    if (!token) return;
+    const cbName = callbackNameRef.current;
+    window[cbName] = (point) => {
+      if (onPointSelect) {
+        onPointSelect(point);
+      }
+    };
+    const el = widgetRef.current;
+    const handlePointSelect = (event) => {
+      const customEv = event;
+      const point = customEv.detail || customEv.point;
+      if (point && onPointSelect) {
+        onPointSelect(point);
+      }
+    };
+    if (el) {
+      el.addEventListener("inpostgeowidget", handlePointSelect);
+      el.addEventListener("onpointselect", handlePointSelect);
+    }
+    document.addEventListener("onpointselect", handlePointSelect);
+    return () => {
+      delete window[cbName];
+      if (el) {
+        el.removeEventListener("inpostgeowidget", handlePointSelect);
+        el.removeEventListener("onpointselect", handlePointSelect);
+      }
+      document.removeEventListener("onpointselect", handlePointSelect);
+    };
+  }, [onPointSelect, isLoaded, token]);
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `flex flex-col items-center justify-center min-h-[450px] bg-danger/10 border-2 border-danger rounded-xl p-6 text-center ${className || ""}`,
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-extrabold text-danger mb-1", children: "B\u0142\u0105d \u0142adowania Geowidget InPost" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-semibold max-w-sm", children: "Nie uda\u0142o si\u0119 pobra\u0107 skryptu mapy z serwera InPost. Sprawd\u017A po\u0142\u0105czenie z sieci\u0105." })
+        ]
+      }
+    );
+  }
+  if (!token) {
+    const filteredPoints = MOCK_POINTS.filter(
+      (p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.address.line1.toLowerCase().includes(searchQuery.toLowerCase()) || p.address_details.city.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `flex flex-col h-full min-h-[500px] bg-surface border-2 border-border rounded-xl p-4 font-sans text-foreground ${className || ""}`,
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-r from-amber-400 via-amber-500 to-yellow-500 text-slate-950 rounded-xl p-4 mb-3.5 shadow-sm flex flex-col gap-1 border border-amber-600/30", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-slate-950 animate-pulse" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-black text-sm tracking-tight uppercase", children: "InPost Paczkomat\xAE" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.7rem] font-black bg-slate-950 text-amber-400 px-2.5 py-0.5 rounded-md uppercase tracking-wider shadow-sm", children: "Tryb Pokazowy" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-slate-950 font-bold leading-relaxed opacity-95", children: [
+              "Wybierz punkt z listy poni\u017Cej. Do za\u0142adowania produkcyjnej mapy przeka\u017C prop ",
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-slate-950 text-amber-400 px-1.5 py-0.5 rounded font-mono text-[0.72rem] font-black", children: 'token="TWOJ_TOKEN"' }),
+              "."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3.5 relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Szukaj Paczkomatu (np. Warszawa, WAW01M, Towarowa)...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              className: "w-full px-4 py-2.5 text-sm bg-surface border-2 border-border rounded-xl outline-none text-foreground placeholder:text-muted-foreground font-bold focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-sm transition-all"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto space-y-3 pr-1 max-h-[420px]", children: filteredPoints.map((p) => {
+            const isSelected = selectedMock?.name === p.name;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onClick: () => {
+                  setSelectedMock(p);
+                  if (onPointSelect) {
+                    onPointSelect(p);
+                  }
+                },
+                className: `p-4 rounded-xl border-2 transition-all cursor-pointer flex items-center justify-between gap-3 ${isSelected ? "bg-primary text-primary-foreground border-primary shadow-md" : "bg-surface border-border hover:border-primary hover:shadow-md text-foreground"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-black text-base flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: isSelected ? "text-primary-foreground font-black" : "text-foreground font-black", children: [
+                        "Paczkomat\xAE ",
+                        p.name
+                      ] }),
+                      p.location_description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[0.72rem] px-2.5 py-0.5 rounded-full font-bold ${isSelected ? "bg-primary-hover text-primary-foreground" : "bg-muted text-primary"}`, children: p.location_description })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-xs font-bold ${isSelected ? "text-primary-foreground/90" : "text-muted-foreground"}`, children: [
+                      p.address.line1,
+                      ", ",
+                      p.address.line2
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: `px-4 py-2 rounded-lg text-xs font-black shrink-0 transition-all shadow-sm ${isSelected ? "bg-amber-400 text-slate-950 border border-amber-500" : "bg-primary hover:bg-primary-hover text-primary-foreground"}`,
+                      children: isSelected ? "Wybrano \u2713" : "Wybierz"
+                    }
+                  )
+                ]
+              },
+              p.name
+            );
+          }) })
+        ]
+      }
+    );
+  }
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex items-center justify-center min-h-[450px] bg-surface border-2 border-border rounded-xl p-6 ${className || ""}`,
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 border-4 border-primary border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-extrabold text-foreground", children: "\u0141adowanie mapy InPost GeoWidget..." })
+        ] })
+      }
+    );
+  }
+  const widgetProps = {
+    language,
+    config: String(config).toLowerCase(),
+    // eslint-disable-next-line react-hooks/refs
+    onpointselect: callbackNameRef.current
+  };
+  if (token) {
+    widgetProps.token = token;
+  }
+  if (sandbox) {
+    widgetProps.sandbox = "true";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full min-h-[450px] relative ${className || ""}`, style, children: React52__namespace.default.createElement("inpost-geowidget", {
+    ref: widgetRef,
+    ...widgetProps,
+    style: { width: "100%", height: "100%", display: "block", minHeight: "450px" }
+  }) });
+};
+var InPostGeowidgetModal = ({
+  value,
+  onSelect,
+  triggerText = "Wybierz Paczkomat\xAE",
+  modalTitle = "Wybierz punkt odbioru InPost",
+  disabled = false,
+  open: controlledOpen,
+  onOpenChange,
+  showSelectedBadge = true,
+  className = "",
+  buttonVariant = "outline",
+  buttonSize = "md",
+  token,
+  language,
+  config,
+  sandbox,
+  customScriptUrl,
+  customCssUrl
+}) => {
+  const [internalOpen, setInternalOpen] = React52.useState(false);
+  const [selectedPoint, setSelectedPoint] = React52.useState(
+    typeof value === "object" && value ? value : null
+  );
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleOpenToggle = (newOpen) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    if (onOpenChange) {
+      onOpenChange(newOpen);
+    }
+  };
+  const handlePointSelect = (point) => {
+    setSelectedPoint(point);
+    if (onSelect) {
+      onSelect(point);
+    }
+    handleOpenToggle(false);
+  };
+  const selectedCode = selectedPoint?.name || (typeof value === "string" ? value : null);
+  const selectedAddress = selectedPoint ? `${selectedPoint.address?.line1 || ""}, ${selectedPoint.address?.line2 || ""}` : null;
+  const isOutline = buttonVariant === "outline";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex flex-col gap-3 min-w-[280px] ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        type: "button",
+        variant: buttonVariant,
+        size: buttonSize,
+        disabled,
+        onClick: () => handleOpenToggle(true),
+        className: `group w-full justify-between gap-4 text-left font-bold shadow-sm hover:shadow-md transition-all py-2.5 px-3.5 rounded-xl ${isOutline ? "bg-surface hover:bg-muted text-foreground border-2 border-border hover:border-primary" : "border-2 border-transparent"}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-black text-[0.7rem] bg-amber-400 text-slate-950 px-2.5 py-1 rounded-md shadow-sm tracking-tight uppercase border border-amber-500/40 shrink-0 group-hover:scale-105 transition-transform", children: "InPost" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate font-bold text-sm ${isOutline ? "text-foreground group-hover:text-primary" : ""}`, children: selectedCode ? `Paczkomat\xAE ${selectedCode}` : triggerText })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `text-xs font-black px-2.5 py-1 rounded-md shrink-0 shadow-sm uppercase tracking-wide transition-all ${isOutline ? "bg-primary text-primary-foreground group-hover:bg-primary-hover" : "bg-amber-400 text-slate-950"}`,
+              children: selectedCode ? "Zmie\u0144" : "Wybierz"
+            }
+          )
+        ]
+      }
+    ),
+    showSelectedBadge && selectedCode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs bg-surface text-foreground border-2 border-border p-3.5 rounded-xl flex flex-col gap-1.5 shadow-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-bold flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary shadow-sm animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-black text-sm text-primary", children: [
+            "Paczkomat\xAE ",
+            selectedCode
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.65rem] bg-amber-400 text-slate-950 font-black px-2 py-0.5 rounded uppercase tracking-wider", children: "Wybrany" })
+      ] }),
+      selectedAddress && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground text-[0.78rem] font-medium pl-4 border-l-2 border-border", children: selectedAddress })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: isOpen, onClose: () => handleOpenToggle(false), width: 850, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pb-3.5 border-b border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-black text-xs bg-amber-400 text-slate-950 px-2.5 py-1 rounded-md shadow-sm tracking-tight uppercase border border-amber-500/40 shrink-0", children: "InPost" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { className: "m-0 text-xl font-black text-primary tracking-tight", children: modalTitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-[600px] min-h-[500px] mt-3.5 rounded-xl overflow-hidden", children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        InPostGeowidget,
+        {
+          token,
+          language,
+          config,
+          sandbox,
+          customScriptUrl,
+          customCssUrl,
+          onPointSelect: handlePointSelect
+        }
+      ) })
+    ] })
+  ] });
+};
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -6147,6 +6549,8 @@ exports.FileUploadField = FileUploadField;
 exports.FormField = FormField;
 exports.Hint = Hint;
 exports.ImageGallery = ImageGallery;
+exports.InPostGeowidget = InPostGeowidget;
+exports.InPostGeowidgetModal = InPostGeowidgetModal;
 exports.InboxContent = InboxContent;
 exports.InboxPopover = InboxPopover;
 exports.InboxTrigger = InboxTrigger;
@@ -6229,6 +6633,7 @@ exports.hslToHex = hslToHex;
 exports.isValidHex = isValidHex;
 exports.normalizeHex = normalizeHex;
 exports.sliderThumbCSS = sliderThumbCSS;
+exports.useInPostScript = useInPostScript;
 exports.useInboxState = useInboxState;
 exports.useStepper = useStepper;
 exports.useToast = useToast;