@jiwambe/components 0.2.0

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+function Overlay({
+  open,
+  onClose,
+  closeOnClick = true,
+  lockScroll = true,
+  children,
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  useEffect(() => {
+    if (!lockScroll) return;
+    if (open) {
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }
+  }, [open, lockScroll]);
+  if (!open) return null;
+  const handleBackdropClick = (e) => {
+    if (closeOnClick && e.target === e.currentTarget) {
+      onClose == null ? void 0 : onClose();
+    }
+  };
+  const classes = [
+    "fixed inset-0 z-40 bg-fill-bg-dimmer",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classes,
+      style,
+      onClick: handleBackdropClick,
+      "aria-hidden": "true",
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  Overlay
+};
+//# sourceMappingURL=Overlay.js.map

package/dist/components/Overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect } from 'react';\n\n/**\n * Props for the Overlay component. Control visibility with open; use onClose to respond to backdrop click.\n */\nexport interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the overlay is visible. When false, nothing is rendered. */\n  open: boolean;\n  /** Called when the user dismisses (e.g. backdrop click). Use to set open to false. @default undefined */\n  onClose?: () => void;\n  /** When true, clicking the backdrop calls onClose. @default true */\n  closeOnClick?: boolean;\n  /** When true, body scroll is locked while open. @default true */\n  lockScroll?: boolean;\n  /** Content rendered above the backdrop (e.g. Drawer, modal dialog). @default undefined */\n  children?: React.ReactNode;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Full-screen dimmer backdrop for modals, drawers, and dialogs. Renders a fixed overlay\n * (z-index 40) and optional lock scroll. Renders nothing when open is false. Place\n * Drawer or dialog content as children; control open/onClose in parent state.\n *\n * @example\n * <Overlay open={isOpen} onClose={() => setIsOpen(false)}>\n *   <Drawer anchor=\"right\">...</Drawer>\n * </Overlay>\n *\n * @example\n * <Overlay open={open} onClose={close} closeOnClick={false}>\n *   <div role=\"dialog\">Must use button to close</div>\n * </Overlay>\n */\nexport function Overlay({\n  open,\n  onClose,\n  closeOnClick = true,\n  lockScroll = true,\n  children,\n  className = '',\n  style,\n  ref,\n  ...rest\n}: OverlayProps) {\n  useEffect(() => {\n    if (!lockScroll) return;\n    if (open) {\n      const prev = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n      return () => {\n        document.body.style.overflow = prev;\n      };\n    }\n  }, [open, lockScroll]);\n\n  if (!open) return null;\n\n  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (closeOnClick && e.target === e.currentTarget) {\n      onClose?.();\n    }\n  };\n\n  const classes = [\n    'fixed inset-0 z-40 bg-fill-bg-dimmer',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      onClick={handleBackdropClick}\n      aria-hidden=\"true\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAqCO;AAAiB;AACtB;AACA;AACe;AACF;AACb;AACY;AACZ;AACA;AAEF;AACE;AACE;AACA;AACE;AACA;AACA;AACE;AAA+B;AACjC;AACF;AAGF;AAEA;AACE;AACE;AAAA;AACF;AAGF;AAAgB;AACd;AACA;AAKF;AACE;AAAC;AAAA;AACC;AACW;AACX;AACS;AACG;AACR;AAEH;AAAA;AAGP;;;;"}

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+/**
+ * Shape of a country entry for the phone input country selector.
+ * iso3 is the key used for controlled/default country (e.g. "KEN").
+ */
+export interface PhoneCountry {
+    iso3: string;
+    iso2: string;
+    label: string;
+    dialCode: string;
+}
+/**
+ * Predefined list of East Africa countries (Burundi, DR Congo, Ethiopia, Kenya,
+ * Rwanda, Sudan, South Sudan, Somalia, Tanzania, Uganda). Use as the countries
+ * prop value when you only need East African numbers, or pass a custom array
+ * for other regions.
+ */
+export declare const EAST_AFRICA_COUNTRIES: PhoneCountry[];
+/**
+ * Props for the PhoneInput component. Renders a country selector (ISO-3) plus a tel input.
+ * Country can be controlled (country/onCountryChange) or uncontrolled (defaultCountry).
+ */
+export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Label text displayed above the input. @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text rendered below the label. @default undefined */
+    supportText?: string;
+    /** Controlled country ISO-3 code (e.g. "KEN"). Use with onCountryChange. @default undefined */
+    country?: string;
+    /** Default country ISO-3 code (uncontrolled). @default 'KEN' */
+    defaultCountry?: string;
+    /** Called when the selected country changes. @default undefined */
+    onCountryChange?: (country: PhoneCountry) => void;
+    /** Places the input in an error state. @default false */
+    error?: boolean;
+    /** Error message shown in the alert below the input when error is true. @default undefined */
+    errorMessage?: string;
+    /** Forwarded ref for the tel input element. @default undefined */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Phone number input with a country selector dropdown. Renders country code (e.g. KE +254)
+ * plus a tel input. Use EAST_AFRICA_COUNTRIES as the default country list, or pass a custom
+ * list. Supports controlled or uncontrolled country selection.
+ *
+ * @example
+ * <PhoneInput label="Phone" defaultCountry="KEN" placeholder="712 345 678" />
+ *
+ * @example
+ * <PhoneInput country={country} onCountryChange={setCountry} error={!!err} errorMessage={err} />
+ */
+export declare function PhoneInput({ label, secondaryLabel, supportText, country: countryProp, defaultCountry, onCountryChange, error, errorMessage, required, disabled, className, id: idProp, placeholder, ref, ...rest }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PhoneInput.d.ts.map

package/dist/components/PhoneInput/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAM/E;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,YAAY,EAW/C,CAAC;AAMF;;;GAGG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAmDD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,cAAc,EACd,WAAW,EACX,OAAO,EAAE,WAAW,EACpB,cAAsB,EACtB,eAAe,EACf,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,MAAM,EACV,WAA2B,EAC3B,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,2CAkOjB"}

package/dist/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,255 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useCallback, useEffect } from "react";
+const EAST_AFRICA_COUNTRIES = [
+  { iso3: "BDI", iso2: "BI", label: "Burundi", dialCode: "+257" },
+  { iso3: "COD", iso2: "CD", label: "DR Congo", dialCode: "+243" },
+  { iso3: "ETH", iso2: "ET", label: "Ethiopia", dialCode: "+251" },
+  { iso3: "KEN", iso2: "KE", label: "Kenya", dialCode: "+254" },
+  { iso3: "RWA", iso2: "RW", label: "Rwanda", dialCode: "+250" },
+  { iso3: "SDN", iso2: "SD", label: "Sudan", dialCode: "+249" },
+  { iso3: "SSD", iso2: "SS", label: "South Sudan", dialCode: "+211" },
+  { iso3: "SOM", iso2: "SO", label: "Somalia", dialCode: "+252" },
+  { iso3: "TZA", iso2: "TZ", label: "Tanzania", dialCode: "+255" },
+  { iso3: "UGA", iso2: "UG", label: "Uganda", dialCode: "+256" }
+];
+function ChevronDown({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9L12 15L18 9" })
+    }
+  );
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function resolveCountry(iso3) {
+  return EAST_AFRICA_COUNTRIES.find((c) => c.iso3 === iso3) ?? EAST_AFRICA_COUNTRIES.find((c) => c.iso3 === "KEN");
+}
+function PhoneInput({
+  label,
+  secondaryLabel,
+  supportText,
+  country: countryProp,
+  defaultCountry = "KEN",
+  onCountryChange,
+  error = false,
+  errorMessage,
+  required,
+  disabled,
+  className,
+  id: idProp,
+  placeholder = "Placeholder",
+  ref,
+  ...rest
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const isCountryControlled = countryProp !== void 0;
+  const [internalCountry, setInternalCountry] = useState(defaultCountry);
+  const activeIso = isCountryControlled ? countryProp : internalCountry;
+  const selected = resolveCountry(activeIso);
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const selectCountry = useCallback(
+    (c) => {
+      var _a;
+      if (!isCountryControlled) setInternalCountry(c.iso3);
+      onCountryChange == null ? void 0 : onCountryChange(c);
+      setOpen(false);
+      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    },
+    [isCountryControlled, onCountryChange]
+  );
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  const handleDropdownKeyDown = (e) => {
+    var _a;
+    if (e.key === "Escape") {
+      setOpen(false);
+      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    }
+  };
+  const containerClasses = [
+    "phone-input-container",
+    "relative flex items-center gap-space-2 min-h-[48px]",
+    "pl-space-4 pr-space-3 py-space-3",
+    "rounded-rad-md outline-none",
+    "transition-all duration-150",
+    !disabled && !error && "border-border-sm border-border-form-primary bg-fill-form-primary",
+    !disabled && error && "border-border-sm border-border-err bg-fill-form-primary",
+    !disabled && "hover:border-border-md hover:border-border-form-primary-hover",
+    !disabled && "has-[:focus]:border-border-md has-[:focus]:border-border-form-primary-active",
+    !disabled && [
+      "has-[:focus-visible]:border-border-sm has-[:focus-visible]:border-border-form-primary-focus",
+      "has-[:focus-visible]:ring-[1.5px] has-[:focus-visible]:ring-border-focus has-[:focus-visible]:ring-offset-[3px]"
+    ].join(" "),
+    disabled && "border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled cursor-not-allowed",
+    className
+  ].filter(Boolean).join(" ");
+  const showErrorAlert = error && errorMessage;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2 w-full", children: [
+    (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: id,
+          className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+          children: [
+            label,
+            secondaryLabel && /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-normal ml-1", children: secondaryLabel }),
+            required && /* @__PURE__ */ jsx("span", { className: "text-text-err ml-0.5", children: "*" })
+          ]
+        }
+      ),
+      supportText && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`,
+          children: supportText
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          disabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          onClick: () => setOpen((prev) => !prev),
+          className: `flex items-center gap-space-2 shrink-0 text-form-text outline-none bg-transparent ${disabled ? "text-text-disabled cursor-not-allowed" : "text-text-primary"}`,
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
+              selected.iso2,
+              " ",
+              selected.dialCode
+            ] }),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: `w-5 h-5 shrink-0 transition-transform duration-150 ${open ? "rotate-180" : ""} ${disabled ? "text-icon-primary-disabled" : "text-icon-primary"}`
+              }
+            )
+          ]
+        }
+      ),
+      open && !disabled && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          role: "listbox",
+          "aria-label": "Select country",
+          onKeyDown: handleDropdownKeyDown,
+          className: "absolute left-0 top-full mt-space-1 z-50 w-full min-w-[200px] max-h-[240px] overflow-y-auto rounded-rad-md border-border-sm border-border-form-primary bg-fill-form-primary shadow-elev-sm",
+          children: EAST_AFRICA_COUNTRIES.map((c) => {
+            const isActive = c.iso3 === selected.iso3;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isActive,
+                onClick: () => selectCountry(c),
+                className: `flex w-full items-center gap-space-3 px-space-4 py-space-3 text-form-text text-left outline-none transition-colors ${isActive ? "bg-green-50 text-green-900 font-medium" : "text-text-primary hover:bg-neutral-50"} focus-visible:bg-neutral-100`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 w-8 text-text-xs text-text-secondary", children: c.iso2 }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: c.label }),
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-secondary", children: c.dialCode })
+                ]
+              },
+              c.iso3
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-form-text text-text-disabled shrink-0 select-none",
+          "aria-hidden": "true",
+          children: "|"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id,
+          type: "tel",
+          disabled,
+          required,
+          placeholder,
+          "aria-invalid": error || void 0,
+          "aria-describedby": showErrorAlert ? `${id}-error` : void 0,
+          className: `flex-1 min-w-0 bg-transparent text-form-text outline-none placeholder:text-text-disabled ${disabled ? "text-text-disabled cursor-not-allowed" : "text-text-primary"}`,
+          ...rest
+        }
+      )
+    ] }),
+    showErrorAlert && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `${id}-error`,
+        role: "alert",
+        className: `flex items-start gap-space-4 p-space-4 rounded-rad-md ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            ErrorIcon,
+            {
+              className: `w-5 h-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  EAST_AFRICA_COUNTRIES,
+  PhoneInput
+};
+//# sourceMappingURL=PhoneInput.js.map

package/dist/components/PhoneInput/PhoneInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.js","sources":["../../../src/components/PhoneInput/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId, useState, useRef, useEffect, useCallback } from 'react';\n\n// ---------------------------------------------------------------------------\n// Country data (East Africa)\n// ---------------------------------------------------------------------------\n\n/**\n * Shape of a country entry for the phone input country selector.\n * iso3 is the key used for controlled/default country (e.g. \"KEN\").\n */\nexport interface PhoneCountry {\n  iso3: string;\n  iso2: string;\n  label: string;\n  dialCode: string;\n}\n\n/**\n * Predefined list of East Africa countries (Burundi, DR Congo, Ethiopia, Kenya,\n * Rwanda, Sudan, South Sudan, Somalia, Tanzania, Uganda). Use as the countries\n * prop value when you only need East African numbers, or pass a custom array\n * for other regions.\n */\nexport const EAST_AFRICA_COUNTRIES: PhoneCountry[] = [\n  { iso3: 'BDI', iso2: 'BI', label: 'Burundi', dialCode: '+257' },\n  { iso3: 'COD', iso2: 'CD', label: 'DR Congo', dialCode: '+243' },\n  { iso3: 'ETH', iso2: 'ET', label: 'Ethiopia', dialCode: '+251' },\n  { iso3: 'KEN', iso2: 'KE', label: 'Kenya', dialCode: '+254' },\n  { iso3: 'RWA', iso2: 'RW', label: 'Rwanda', dialCode: '+250' },\n  { iso3: 'SDN', iso2: 'SD', label: 'Sudan', dialCode: '+249' },\n  { iso3: 'SSD', iso2: 'SS', label: 'South Sudan', dialCode: '+211' },\n  { iso3: 'SOM', iso2: 'SO', label: 'Somalia', dialCode: '+252' },\n  { iso3: 'TZA', iso2: 'TZ', label: 'Tanzania', dialCode: '+255' },\n  { iso3: 'UGA', iso2: 'UG', label: 'Uganda', dialCode: '+256' },\n];\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the PhoneInput component. Renders a country selector (ISO-3) plus a tel input.\n * Country can be controlled (country/onCountryChange) or uncontrolled (defaultCountry).\n */\nexport interface PhoneInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\n  /** Label text displayed above the input. @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text rendered below the label. @default undefined */\n  supportText?: string;\n  /** Controlled country ISO-3 code (e.g. \"KEN\"). Use with onCountryChange. @default undefined */\n  country?: string;\n  /** Default country ISO-3 code (uncontrolled). @default 'KEN' */\n  defaultCountry?: string;\n  /** Called when the selected country changes. @default undefined */\n  onCountryChange?: (country: PhoneCountry) => void;\n  /** Places the input in an error state. @default false */\n  error?: boolean;\n  /** Error message shown in the alert below the input when error is true. @default undefined */\n  errorMessage?: string;\n  /** Forwarded ref for the tel input element. @default undefined */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.25\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 9L12 15L18 9\" />\n    </svg>\n  );\n}\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nfunction resolveCountry(iso3?: string): PhoneCountry {\n  return (\n    EAST_AFRICA_COUNTRIES.find((c) => c.iso3 === iso3) ??\n    EAST_AFRICA_COUNTRIES.find((c) => c.iso3 === 'KEN')!\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Phone number input with a country selector dropdown. Renders country code (e.g. KE +254)\n * plus a tel input. Use EAST_AFRICA_COUNTRIES as the default country list, or pass a custom\n * list. Supports controlled or uncontrolled country selection.\n *\n * @example\n * <PhoneInput label=\"Phone\" defaultCountry=\"KEN\" placeholder=\"712 345 678\" />\n *\n * @example\n * <PhoneInput country={country} onCountryChange={setCountry} error={!!err} errorMessage={err} />\n */\nexport function PhoneInput({\n  label,\n  secondaryLabel,\n  supportText,\n  country: countryProp,\n  defaultCountry = 'KEN',\n  onCountryChange,\n  error = false,\n  errorMessage,\n  required,\n  disabled,\n  className,\n  id: idProp,\n  placeholder = 'Placeholder',\n  ref,\n  ...rest\n}: PhoneInputProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n\n  // Country selection\n  const isCountryControlled = countryProp !== undefined;\n  const [internalCountry, setInternalCountry] = useState(defaultCountry);\n  const activeIso = isCountryControlled ? countryProp : internalCountry;\n  const selected = resolveCountry(activeIso);\n\n  // Dropdown state\n  const [open, setOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const selectCountry = useCallback(\n    (c: PhoneCountry) => {\n      if (!isCountryControlled) setInternalCountry(c.iso3);\n      onCountryChange?.(c);\n      setOpen(false);\n      triggerRef.current?.focus();\n    },\n    [isCountryControlled, onCountryChange],\n  );\n\n  // Close dropdown on click outside\n  useEffect(() => {\n    if (!open) return;\n    function handleClick(e: MouseEvent) {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(e.target as Node) &&\n        triggerRef.current &&\n        !triggerRef.current.contains(e.target as Node)\n      ) {\n        setOpen(false);\n      }\n    }\n    document.addEventListener('mousedown', handleClick);\n    return () => document.removeEventListener('mousedown', handleClick);\n  }, [open]);\n\n  // Keyboard nav inside dropdown\n  const handleDropdownKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setOpen(false);\n      triggerRef.current?.focus();\n    }\n  };\n\n  // Container classes — border reacts to any child focus\n  const containerClasses = [\n    'phone-input-container',\n    'relative flex items-center gap-space-2 min-h-[48px]',\n    'pl-space-4 pr-space-3 py-space-3',\n    'rounded-rad-md outline-none',\n    'transition-all duration-150',\n\n    !disabled && !error &&\n      'border-border-sm border-border-form-primary bg-fill-form-primary',\n    !disabled && error &&\n      'border-border-sm border-border-err bg-fill-form-primary',\n\n    !disabled &&\n      'hover:border-border-md hover:border-border-form-primary-hover',\n\n    !disabled &&\n      'has-[:focus]:border-border-md has-[:focus]:border-border-form-primary-active',\n\n    !disabled && [\n      'has-[:focus-visible]:border-border-sm has-[:focus-visible]:border-border-form-primary-focus',\n      'has-[:focus-visible]:ring-[1.5px] has-[:focus-visible]:ring-border-focus has-[:focus-visible]:ring-offset-[3px]',\n    ].join(' '),\n\n    disabled &&\n      'border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled cursor-not-allowed',\n\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showErrorAlert = error && errorMessage;\n\n  return (\n    <div className=\"flex flex-col gap-space-2 w-full\">\n      {/* Label + support text */}\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <label\n              htmlFor={id}\n              className={`text-form-label ${disabled ? 'text-text-disabled' : 'text-text-primary'}`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"text-text-secondary font-normal ml-1\">\n                  {secondaryLabel}\n                </span>\n              )}\n              {required && (\n                <span className=\"text-text-err ml-0.5\">*</span>\n              )}\n            </label>\n          )}\n          {supportText && (\n            <p\n              className={`text-text-xs ${disabled ? 'text-text-disabled' : 'text-text-secondary'}`}\n            >\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Input container */}\n      <div className={containerClasses}>\n        {/* Country selector button */}\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          disabled={disabled}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          onClick={() => setOpen((prev) => !prev)}\n          className={`flex items-center gap-space-2 shrink-0 text-form-text outline-none bg-transparent ${\n            disabled ? 'text-text-disabled cursor-not-allowed' : 'text-text-primary'\n          }`}\n        >\n          <span className=\"whitespace-nowrap\">\n            {selected.iso2} {selected.dialCode}\n          </span>\n          <ChevronDown\n            className={`w-5 h-5 shrink-0 transition-transform duration-150 ${\n              open ? 'rotate-180' : ''\n            } ${disabled ? 'text-icon-primary-disabled' : 'text-icon-primary'}`}\n          />\n        </button>\n\n        {/* Dropdown */}\n        {open && !disabled && (\n          <div\n            ref={dropdownRef}\n            role=\"listbox\"\n            aria-label=\"Select country\"\n            onKeyDown={handleDropdownKeyDown}\n            className=\"absolute left-0 top-full mt-space-1 z-50 w-full min-w-[200px] max-h-[240px] overflow-y-auto rounded-rad-md border-border-sm border-border-form-primary bg-fill-form-primary shadow-elev-sm\"\n          >\n            {EAST_AFRICA_COUNTRIES.map((c) => {\n              const isActive = c.iso3 === selected.iso3;\n              return (\n                <button\n                  key={c.iso3}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isActive}\n                  onClick={() => selectCountry(c)}\n                  className={`flex w-full items-center gap-space-3 px-space-4 py-space-3 text-form-text text-left outline-none transition-colors ${\n                    isActive\n                      ? 'bg-green-50 text-green-900 font-medium'\n                      : 'text-text-primary hover:bg-neutral-50'\n                  } focus-visible:bg-neutral-100`}\n                >\n                  <span className=\"shrink-0 w-8 text-text-xs text-text-secondary\">\n                    {c.iso2}\n                  </span>\n                  <span className=\"flex-1 truncate\">{c.label}</span>\n                  <span className=\"shrink-0 text-text-secondary\">\n                    {c.dialCode}\n                  </span>\n                </button>\n              );\n            })}\n          </div>\n        )}\n\n        {/* Separator */}\n        <span\n          className=\"text-form-text text-text-disabled shrink-0 select-none\"\n          aria-hidden=\"true\"\n        >\n          |\n        </span>\n\n        {/* Phone number input */}\n        <input\n          ref={ref}\n          id={id}\n          type=\"tel\"\n          disabled={disabled}\n          required={required}\n          placeholder={placeholder}\n          aria-invalid={error || undefined}\n          aria-describedby={showErrorAlert ? `${id}-error` : undefined}\n          className={`flex-1 min-w-0 bg-transparent text-form-text outline-none placeholder:text-text-disabled ${\n            disabled ? 'text-text-disabled cursor-not-allowed' : 'text-text-primary'\n          }`}\n          {...rest}\n        />\n      </div>\n\n      {/* Error alert */}\n      {showErrorAlert && (\n        <div\n          id={`${id}-error`}\n          role=\"alert\"\n          className={`flex items-start gap-space-4 p-space-4 rounded-rad-md ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`w-5 h-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAyBO;AAA8C;AACI;AACC;AACA;AACH;AACC;AACD;AACM;AACJ;AACC;AAE1D;AAoCA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACE;AACK;AACE;AACC;AACH;AAEc;AAAA;AAGhC;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAEA;AACE;AAIF;AAiBO;AAAoB;AACzB;AACA;AACA;AACS;AACQ;AACjB;AACQ;AACR;AACA;AACA;AACA;AACI;AACU;AACd;AAEF;AACE;AACA;AAGA;AACA;AACA;AACA;AAGA;AACA;AACA;AAEA;AAAsB;;AAElB;AACA;AACA;AACA;AAAoB;AACtB;AACqC;AAIvC;AACE;AACA;AACE;AAME;AAAa;AACf;AAEF;AACA;AAAkE;AAIpE;;AACE;AACE;AACA;AAAoB;AACtB;AAIF;AAAyB;AACvB;AACA;AACA;AACA;AACA;AAGE;AAEA;AAGA;AAGA;AAEW;AACX;AACA;AACQ;AAGR;AAEF;AAKF;AAEA;AAGM;AAEG;AACC;AAAC;AAAA;AACU;AAC0E;AAElF;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAK5C;AAAC;AAAA;AACmF;AAEjF;AAAA;AAAA;AAGP;AAMA;AAAA;AAAC;AAAA;AACM;AACA;AACL;AACc;AACC;AACuB;AAGtC;AAEA;AACG;AAAS;AAAK;AAAW;AAC5B;AACA;AAAC;AAAA;AAGkE;AAAA;AAAA;AACnE;AAAA;AAAA;AAKA;AAAC;AAAA;AACM;AACA;AACM;AACA;AACD;AAGR;AACA;AACE;AAAC;AAAA;AAEM;AACA;AACU;AACe;AAK9B;AAEA;AAEA;AAC2C;AAG3C;AAAA;AAAA;AAjBO;AAAA;AAoBZ;AAAA;AAAA;AAKL;AAAC;AAAA;AACW;AACE;AACb;AAAA;AAAA;AAKD;AAAC;AAAA;AACC;AACA;AACK;AACL;AACA;AACA;AACuB;AAC4B;AAGnD;AACI;AAAA;AAAA;AAER;AAIE;AAAC;AAAA;AACU;AACJ;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AAKV;;;;;"}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+/**
+ * Horizontal alignment of the popover panel relative to its trigger container.
+ * 'left' — panel left edge aligns with container; 'right' — panel right edge aligns.
+ */
+export type PopoverAlign = 'left' | 'right';
+/**
+ * Props for the Popover component. The trigger is not part of Popover — wrap trigger and
+ * Popover in a single relative container; Popover renders as a floating panel anchored
+ * below that container. open/onClose control visibility; click-outside calls onClose.
+ */
+export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether the popover panel is visible. */
+    open: boolean;
+    /** Called when the user clicks outside the popover (dismiss). Required for accessibility. */
+    onClose: () => void;
+    /** Horizontal alignment of the panel relative to the trigger container. @default 'left' */
+    align?: PopoverAlign;
+    /** Min width of the popover panel. @default '10rem' (160px) */
+    minWidth?: string;
+    /** Panel content (e.g. menu items, actions). @default undefined */
+    children?: React.ReactNode;
+    /** Forwarded ref for the panel div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Floating content panel anchored below a trigger element. Handles click-outside
+ * dismissal. Wrap the trigger and Popover in a single relative container; the
+ * panel is positioned below it. Use for dropdown menus, tooltips, or action panels.
+ *
+ * @example
+ * <Box className="relative">
+ *   <Button onClick={toggle}>Open</Button>
+ *   <Popover open={isOpen} onClose={close} align="left">
+ *     <Stack spacing="space-1">...</Stack>
+ *   </Popover>
+ * </Box>
+ *
+ * @example
+ * <div className="relative">
+ *   <button onClick={() => setOpen(true)}>Menu</button>
+ *   <Popover open={open} onClose={() => setOpen(false)} align="right" minWidth="12rem">...</Popover>
+ * </div>
+ */
+export declare function Popover({ open, onClose, align, minWidth, children, className, style, ref, ...rest }: PopoverProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C;;;;GAIG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,4CAA4C;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,6FAA6F;IAC7F,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0DAA0D;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAOD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,KAAc,EACd,QAAkB,EAClB,QAAQ,EACR,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,kDAyCd"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useCallback, useEffect } from "react";
+const alignClasses = {
+  left: "left-0",
+  right: "right-0"
+};
+function Popover({
+  open,
+  onClose,
+  align = "left",
+  minWidth = "10rem",
+  children,
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  const innerRef = useRef(null);
+  const resolvedRef = ref || innerRef;
+  const handleClickOutside = useCallback(
+    (e) => {
+      var _a;
+      const el = resolvedRef && "current" in resolvedRef ? resolvedRef.current : innerRef.current;
+      if (el && !((_a = el.parentElement) == null ? void 0 : _a.contains(e.target))) {
+        onClose();
+      }
+    },
+    [onClose, resolvedRef]
+  );
+  useEffect(() => {
+    if (!open) return;
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, handleClickOutside]);
+  if (!open) return null;
+  const classes = [
+    "absolute top-full z-50 mt-space-1 rounded-rad-md bg-fill-bg-primary p-space-1 shadow-elevation-low",
+    alignClasses[align],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: innerRef,
+      className: classes,
+      style: { minWidth, ...style },
+      role: "menu",
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  Popover
+};
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useCallback } from 'react';\n\n/**\n * Horizontal alignment of the popover panel relative to its trigger container.\n * 'left' — panel left edge aligns with container; 'right' — panel right edge aligns.\n */\nexport type PopoverAlign = 'left' | 'right';\n\n/**\n * Props for the Popover component. The trigger is not part of Popover — wrap trigger and\n * Popover in a single relative container; Popover renders as a floating panel anchored\n * below that container. open/onClose control visibility; click-outside calls onClose.\n */\nexport interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the popover panel is visible. */\n  open: boolean;\n  /** Called when the user clicks outside the popover (dismiss). Required for accessibility. */\n  onClose: () => void;\n  /** Horizontal alignment of the panel relative to the trigger container. @default 'left' */\n  align?: PopoverAlign;\n  /** Min width of the popover panel. @default '10rem' (160px) */\n  minWidth?: string;\n  /** Panel content (e.g. menu items, actions). @default undefined */\n  children?: React.ReactNode;\n  /** Forwarded ref for the panel div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst alignClasses: Record<PopoverAlign, string> = {\n  left: 'left-0',\n  right: 'right-0',\n};\n\n/**\n * Floating content panel anchored below a trigger element. Handles click-outside\n * dismissal. Wrap the trigger and Popover in a single relative container; the\n * panel is positioned below it. Use for dropdown menus, tooltips, or action panels.\n *\n * @example\n * <Box className=\"relative\">\n *   <Button onClick={toggle}>Open</Button>\n *   <Popover open={isOpen} onClose={close} align=\"left\">\n *     <Stack spacing=\"space-1\">...</Stack>\n *   </Popover>\n * </Box>\n *\n * @example\n * <div className=\"relative\">\n *   <button onClick={() => setOpen(true)}>Menu</button>\n *   <Popover open={open} onClose={() => setOpen(false)} align=\"right\" minWidth=\"12rem\">...</Popover>\n * </div>\n */\nexport function Popover({\n  open,\n  onClose,\n  align = 'left',\n  minWidth = '10rem',\n  children,\n  className = '',\n  style,\n  ref,\n  ...rest\n}: PopoverProps) {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const resolvedRef = (ref as React.RefObject<HTMLDivElement>) || innerRef;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      const el = resolvedRef && 'current' in resolvedRef ? resolvedRef.current : innerRef.current;\n      if (el && !el.parentElement?.contains(e.target as Node)) {\n        onClose();\n      }\n    },\n    [onClose, resolvedRef],\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [open, handleClickOutside]);\n\n  if (!open) return null;\n\n  const classes = [\n    'absolute top-full z-50 mt-space-1 rounded-rad-md bg-fill-bg-primary p-space-1 shadow-elevation-low',\n    alignClasses[align],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      ref={innerRef}\n      className={classes}\n      style={{ minWidth, ...style }}\n      role=\"menu\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA8BA;AAAmD;AAC3C;AAER;AAqBO;AAAiB;AACtB;AACA;AACQ;AACG;AACX;AACY;AACZ;AACA;AAEF;AACE;AACA;AAEA;AAA2B;;AAEvB;AACA;AACE;AAAA;AACF;AACF;AACqB;AAGvB;AACE;AACA;AACA;AAAyE;AAG3E;AAEA;AAAgB;AACd;AACkB;AAClB;AAKF;AACE;AAAC;AAAA;AACM;AACM;AACW;AACjB;AACD;AAEH;AAAA;AAGP;;;;"}

package/dist/components/ProductImage/ProductImage.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+/**
+ * Props for the ProductImage component. Renders a single image in a bordered container
+ * with optional expand button. Uses next/image for optimization.
+ */
+export interface ProductImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Image source URL. */
+    src: string;
+    /** Alt text for the image. @default '' */
+    alt?: string;
+    /** Width for next/image. @default 800 */
+    width?: number;
+    /** Height for next/image. @default 800 */
+    height?: number;
+    /** When true, shows an expand/fullscreen icon overlay. @default false */
+    showExpand?: boolean;
+    /** Called when the expand icon is clicked. @default undefined */
+    onExpand?: () => void;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Single product image in a bordered, rounded container. Uses next/image. Optional
+ * expand button for opening in a lightbox or fullscreen (handle with onExpand).
+ * For multiple images with thumbnails use ProductImageGallery.
+ *
+ * @example
+ * <ProductImage src="/product.jpg" alt="Product" />
+ *
+ * @example
+ * <ProductImage src={url} showExpand onExpand={() => openLightbox()} />
+ */
+export declare function ProductImage({ src, alt, width, height, showExpand, onExpand, className, ref, ...rest }: ProductImageProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shape of a single image in the gallery. Each item needs src; alt is optional.
+ */
+export interface GalleryImage {
+    src: string;
+    alt?: string;
+}
+/**
+ * Props for ProductImageGallery. Main image area shows one image at a time with
+ * optional prev/next arrows and expand; thumbnails strip below for multi-image selection.
+ * Supports controlled (activeIndex/onChange) or uncontrolled (defaultIndex) selection.
+ */
+export interface ProductImageGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of images. Each: src (string), alt? (string). @see GalleryImage */
+    images: GalleryImage[];
+    /** Index of the initially selected image (uncontrolled). @default 0 */
+    defaultIndex?: number;
+    /** Controlled selected index. Use with onChange. @default undefined */
+    activeIndex?: number;
+    /** Called when the user selects another image (thumbnail or arrow). @default undefined */
+    onChange?: (index: number) => void;
+    /** When true, shows expand icon on the main image. @default true */
+    showExpand?: boolean;
+    /** Called when the expand icon is clicked; receives current image index. @default undefined */
+    onExpand?: (index: number) => void;
+    /** Width for next/image main image. @default 800 */
+    imageWidth?: number;
+    /** Height for next/image main image. Main area uses aspect ratio 4:3. @default 600 */
+    imageHeight?: number;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Product image gallery with main image and horizontal thumbnail strip. Main image
+ * has prev/next arrows and optional expand; thumbnails are selectable. Use for PDPs
+ * or any multi-image product view. Single image use ProductImage instead.
+ *
+ * @example
+ * <ProductImageGallery images={[{ src: '/a.jpg' }, { src: '/b.jpg', alt: 'Back' }]} />
+ *
+ * @example
+ * <ProductImageGallery images={imgs} activeIndex={idx} onChange={setIdx} showExpand onExpand={openLightbox} />
+ */
+export declare function ProductImageGallery({ images, defaultIndex, activeIndex: activeProp, onChange, showExpand, onExpand, imageWidth, imageHeight, className, ref, ...rest }: ProductImageGalleryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductImage.d.ts.map

package/dist/components/ProductImage/ProductImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImage.d.ts","sourceRoot":"","sources":["../../../src/components/ProductImage/ProductImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAiDxE;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAAE,GAAG,EAAE,GAAQ,EAAE,KAAW,EAAE,MAAY,EAAE,UAAkB,EAAE,QAAQ,EAAE,SAAc,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,2CA4BvJ;AAMD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACtG,4EAA4E;IAC5E,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,YAAgB,EAChB,WAAW,EAAE,UAAU,EACvB,QAAQ,EACR,UAAiB,EACjB,QAAQ,EACR,UAAgB,EAChB,WAAiB,EACjB,SAAc,EACd,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,2CAuJ1B"}