@ogc-maps/storybook-components 0.6.2 → 0.8.0

package/dist/{CollapsibleControl-VFUTWb_5.js → CollapsibleControl-CGRNPpCw.js}

@@ -26,7 +26,7 @@ function x({
         children: /* @__PURE__ */ a(t, { size: 20, className: "mapui:text-gray-700" })
       }
     ),
-    !m && /* @__PURE__ */ e("div", { className: "mapui:absolute mapui:top-0 mapui:right-full mapui:mr-2 mapui:z-10 mapui:bg-white mapui:rounded-lg mapui:shadow-lg mapui:overflow-hidden", children: [
+    !m && /* @__PURE__ */ e("div", { className: "mapui:absolute mapui:top-0 mapui:right-full mapui:mr-2 mapui:z-10 mapui:bg-white mapui:rounded-lg mapui:shadow-lg", children: [
       /* @__PURE__ */ e("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:p-2 mapui:border-b mapui:border-gray-200", children: [
         /* @__PURE__ */ e("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
           /* @__PURE__ */ a(t, { size: 18, className: "mapui:text-gray-700" }),

package/dist/{Legend-B6uIqOSw.js → Legend-BiRyrZL1.js}

@@ -1,5 +1,5 @@
 import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import { useState as f } from "react";
+import { useState as b } from "react";
 import { BsArrowsAngleContract as N, BsArrowsAngleExpand as y } from "react-icons/bs";
 const w = {
   fill: "fill-opacity",
@@ -7,56 +7,56 @@ const w = {
   circle: "circle-opacity",
   symbol: "icon-opacity"
 };
-function v(i) {
-  var n;
-  const m = i.style;
-  if (!m) return 1;
-  const e = w[m.type];
+function v(m) {
+  var n, l;
+  const t = (n = m.styles) == null ? void 0 : n[0];
+  if (!t) return 1;
+  const e = w[t.type];
   if (!e) return 1;
-  const u = (n = m.paint) == null ? void 0 : n[e];
+  const u = (l = t.paint) == null ? void 0 : l[e];
   return typeof u == "number" ? u : 1;
 }
-function g({ color: i, shape: m }) {
-  const e = m ?? "square";
+function x({ color: m, shape: t }) {
+  const e = t ?? "square";
   return e === "circle" ? /* @__PURE__ */ a(
     "span",
     {
       className: "mapui:inline-block mapui:h-3 mapui:w-3 mapui:rounded-full mapui:shrink-0",
-      style: { backgroundColor: i }
+      style: { backgroundColor: m }
     }
   ) : e === "line" ? /* @__PURE__ */ a(
     "span",
     {
       className: "mapui:inline-block mapui:h-0.5 mapui:w-4 mapui:rounded-full mapui:shrink-0",
-      style: { backgroundColor: i }
+      style: { backgroundColor: m }
     }
   ) : /* @__PURE__ */ a(
     "span",
     {
       className: "mapui:inline-block mapui:h-3 mapui:w-3 mapui:rounded-sm mapui:shrink-0",
-      style: { backgroundColor: i }
+      style: { backgroundColor: m }
     }
   );
 }
-function k(i) {
-  return `linear-gradient(to right, ${i.map((m, e) => `${m.color} ${e / i.length * 100}% ${(e + 1) / i.length * 100}%`).join(", ")})`;
+function k(m) {
+  return `linear-gradient(to right, ${m.map((t, e) => `${t.color} ${e / m.length * 100}% ${(e + 1) / m.length * 100}%`).join(", ")})`;
 }
-function $(i) {
-  return `linear-gradient(to right, ${i.map((m) => m.color).join(", ")})`;
+function $(m) {
+  return `linear-gradient(to right, ${m.map((t) => t.color).join(", ")})`;
 }
-function C({ legend: i, label: m }) {
-  const { entries: e } = i;
+function C({ legend: m, label: t }) {
+  const { entries: e } = m;
   return e.length === 1 ? /* @__PURE__ */ p("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0", children: [
-    /* @__PURE__ */ a(g, { color: e[0].color, shape: e[0].shape }),
-    /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate", children: e[0].label || m })
+    /* @__PURE__ */ a(x, { color: e[0].color, shape: e[0].shape }),
+    /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate", children: e[0].label || t })
   ] }) : /* @__PURE__ */ p("div", { children: [
-    /* @__PURE__ */ a("div", { className: "mapui:mb-1 mapui:text-xs mapui:font-medium mapui:text-gray-600", children: m }),
+    /* @__PURE__ */ a("div", { className: "mapui:mb-1 mapui:text-xs mapui:font-medium mapui:text-gray-600", children: t }),
     /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:space-y-1 mapui:p-0 mapui:pl-1", children: e.map((u, n) => /* @__PURE__ */ p(
       "li",
       {
         className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0",
         children: [
-          /* @__PURE__ */ a(g, { color: u.color, shape: u.shape }),
+          /* @__PURE__ */ a(x, { color: u.color, shape: u.shape }),
           /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate", children: u.label })
         ]
       },
@@ -65,13 +65,13 @@ function C({ legend: i, label: m }) {
   ] });
 }
 function L({
-  legend: i,
-  label: m,
+  legend: m,
+  label: t,
   expanded: e,
   onToggle: u
 }) {
-  var l, d;
-  const { entries: n, showLabelsCollapsed: r } = i;
+  var s, h;
+  const { entries: n, showLabelsCollapsed: l } = m;
   return /* @__PURE__ */ p("div", { children: [
     /* @__PURE__ */ p(
       "button",
@@ -82,7 +82,7 @@ function L({
         "aria-expanded": e,
         children: [
           /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-400", children: e ? "▾" : "▸" }),
-          /* @__PURE__ */ a("span", { className: "mapui:truncate", children: m })
+          /* @__PURE__ */ a("span", { className: "mapui:truncate", children: t })
         ]
       }
     ),
@@ -91,34 +91,34 @@ function L({
         "div",
         {
           className: "mapui:h-3 mapui:min-w-12 mapui:max-w-32 mapui:rounded-sm",
-          style: { background: k(n) }
+          style: { background: k(n.filter((r, o, g) => g.findIndex((i) => i.color === r.color) === o)) }
         }
       ),
-      r && !e && /* @__PURE__ */ p("div", { className: "mapui:mt-1 mapui:flex mapui:justify-between mapui:text-[10px] mapui:text-gray-500 mapui:max-w-32", children: [
-        /* @__PURE__ */ a("span", { className: "mapui:truncate", children: (l = n[0]) == null ? void 0 : l.label }),
-        n.length > 1 && /* @__PURE__ */ a("span", { className: "mapui:truncate", children: (d = n[n.length - 1]) == null ? void 0 : d.label })
+      l && !e && /* @__PURE__ */ p("div", { className: "mapui:mt-1 mapui:flex mapui:justify-between mapui:text-[10px] mapui:text-gray-500 mapui:max-w-32", children: [
+        /* @__PURE__ */ a("span", { className: "mapui:truncate", children: (s = n[0]) == null ? void 0 : s.label }),
+        n.length > 1 && /* @__PURE__ */ a("span", { className: "mapui:truncate", children: (h = n[n.length - 1]) == null ? void 0 : h.label })
       ] })
     ] }),
-    e && /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:mt-1 mapui:ml-4 mapui:list-none mapui:space-y-1 mapui:p-0 mapui:max-h-48 mapui:overflow-y-auto", children: n.map((c, h) => /* @__PURE__ */ p(
+    e && /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:mt-1 mapui:ml-4 mapui:list-none mapui:space-y-1 mapui:p-0 mapui:max-h-48 mapui:overflow-y-auto", children: n.map((r, o) => /* @__PURE__ */ p(
       "li",
       {
         className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0",
         children: [
-          /* @__PURE__ */ a(g, { color: c.color, shape: c.shape }),
-          /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate mapui:text-xs", children: c.label })
+          /* @__PURE__ */ a(x, { color: r.color, shape: r.shape }),
+          /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate mapui:text-xs", children: r.label })
         ]
       },
-      `${c.label}-${h}`
+      `${r.label}-${o}`
     )) })
   ] });
 }
 function E({
-  legend: i,
-  label: m,
+  legend: m,
+  label: t,
   expanded: e,
   onToggle: u
 }) {
-  const { entries: n, gradientProperty: r } = i;
+  const { entries: n, gradientProperty: l } = m;
   return /* @__PURE__ */ p("div", { children: [
     /* @__PURE__ */ p(
       "button",
@@ -129,7 +129,7 @@ function E({
         "aria-expanded": e,
         children: [
           /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-400", children: e ? "▾" : "▸" }),
-          /* @__PURE__ */ a("span", { className: "mapui:truncate", children: m })
+          /* @__PURE__ */ a("span", { className: "mapui:truncate", children: t })
         ]
       }
     ),
@@ -141,7 +141,7 @@ function E({
       }
     ) }),
     e && /* @__PURE__ */ p("div", { className: "mapui:mt-1 mapui:ml-4 mapui:text-xs mapui:text-gray-600", children: [
-      r && /* @__PURE__ */ a("div", { className: "mapui:font-medium mapui:mb-1", children: r }),
+      l && /* @__PURE__ */ a("div", { className: "mapui:font-medium mapui:mb-1", children: l }),
       n.length >= 2 && /* @__PURE__ */ p("div", { className: "mapui:flex mapui:justify-between mapui:max-w-32", children: [
         /* @__PURE__ */ a("span", { children: n[0].label }),
         /* @__PURE__ */ a("span", { children: n[n.length - 1].label })
@@ -150,8 +150,8 @@ function E({
   ] });
 }
 function j({
-  layerId: i,
-  opacity: m,
+  layerId: m,
+  opacity: t,
   onChange: e
 }) {
   return /* @__PURE__ */ p("div", { className: "mapui:flex mapui:items-center mapui:gap-1.5 mapui:mt-0.5 mapui:ml-1", children: [
@@ -162,27 +162,27 @@ function j({
         min: 0,
         max: 1,
         step: 0.01,
-        value: m,
-        onChange: (u) => e(i, parseFloat(u.target.value)),
+        value: t,
+        onChange: (u) => e(m, parseFloat(u.target.value)),
         className: "range-sm mapui:w-14"
       }
     ),
     /* @__PURE__ */ p("span", { className: "mapui:text-[9px] mapui:text-gray-400 mapui:w-6 mapui:text-right mapui:tabular-nums", children: [
-      Math.round(m * 100),
+      Math.round(t * 100),
       "%"
     ] })
   ] });
 }
-function G({ layers: i, visibleLayerIds: m, onOpacityChange: e, className: u }) {
-  const [n, r] = f(/* @__PURE__ */ new Set()), [l, d] = f(!1), c = i.filter((t) => m.includes(t.id));
-  function h(t) {
-    r((o) => {
-      const s = new Set(o);
-      return s.has(t) ? s.delete(t) : s.add(t), s;
+function G({ layers: m, visibleLayerIds: t, onOpacityChange: e, className: u }) {
+  const [n, l] = b(/* @__PURE__ */ new Set()), [s, h] = b(!1), r = m.filter((i) => t.includes(i.id));
+  function o(i) {
+    l((d) => {
+      const c = new Set(d);
+      return c.has(i) ? c.delete(i) : c.add(i), c;
     });
   }
-  const x = c.filter((t) => t.legend !== void 0);
-  return x.length === 0 ? null : /* @__PURE__ */ p(
+  const g = r.filter((i) => i.legend !== void 0);
+  return g.length === 0 ? null : /* @__PURE__ */ p(
     "div",
     {
       className: `mapui:rounded-lg mapui:bg-white mapui:p-3 mapui:shadow-md mapui:text-sm${u ? ` ${u}` : ""}`,
@@ -194,41 +194,41 @@ function G({ layers: i, visibleLayerIds: m, onOpacityChange: e, className: u })
             {
               type: "button",
               className: "mapui:bg-transparent mapui:border-none mapui:p-0 mapui:cursor-pointer mapui:text-gray-400 hover:mapui:text-gray-600 mapui:text-sm",
-              onClick: () => d((t) => !t),
-              "aria-label": l ? "Collapse legend" : "Expand legend",
-              children: l ? /* @__PURE__ */ a(N, {}) : /* @__PURE__ */ a(y, {})
+              onClick: () => h((i) => !i),
+              "aria-label": s ? "Collapse legend" : "Expand legend",
+              children: s ? /* @__PURE__ */ a(N, {}) : /* @__PURE__ */ a(y, {})
             }
           )
         ] }),
-        /* @__PURE__ */ a("ul", { className: `mapui:m-0 mapui:list-none mapui:p-0 ${l ? "mapui:space-y-1.5" : "mapui:space-y-2"}`, children: x.map((t) => {
-          const o = t.legend, s = o.displayMode ?? "simple", b = l || n.has(t.id);
+        /* @__PURE__ */ a("ul", { className: `mapui:m-0 mapui:list-none mapui:p-0 ${s ? "mapui:space-y-1.5" : "mapui:space-y-2"}`, children: g.map((i) => {
+          const d = i.legend, c = d.displayMode ?? "simple", f = s || n.has(i.id);
           return /* @__PURE__ */ p("li", { children: [
-            s === "categorical" ? /* @__PURE__ */ a(
+            c === "categorical" ? /* @__PURE__ */ a(
               L,
               {
-                legend: o,
-                label: t.label,
-                expanded: b,
-                onToggle: () => h(t.id)
+                legend: d,
+                label: i.label,
+                expanded: f,
+                onToggle: () => o(i.id)
               }
-            ) : s === "gradient" ? /* @__PURE__ */ a(
+            ) : c === "gradient" ? /* @__PURE__ */ a(
               E,
               {
-                legend: o,
-                label: t.label,
-                expanded: b,
-                onToggle: () => h(t.id)
+                legend: d,
+                label: i.label,
+                expanded: f,
+                onToggle: () => o(i.id)
               }
-            ) : /* @__PURE__ */ a(C, { legend: o, label: t.label }),
-            l && e && /* @__PURE__ */ a(
+            ) : /* @__PURE__ */ a(C, { legend: d, label: i.label }),
+            s && e && /* @__PURE__ */ a(
               j,
               {
-                layerId: t.id,
-                opacity: v(t),
+                layerId: i.id,
+                opacity: v(i),
                 onChange: e
               }
             )
-          ] }, t.id);
+          ] }, i.id);
         }) })
       ]
     }

package/dist/{SearchPanel-DCY01Wa-.js → SearchPanel-DtLXMoVs.js}

@@ -80,7 +80,7 @@ function R({
   id: l
 }) {
   const y = D(), f = l ?? y, c = `${f}-start`, p = `${f}-end`, o = "mapui:flex-1 mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
-  return /* @__PURE__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1 ${N}`.trim(), children: [
+  return /* @__PURE__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1.5 ${N}`.trim(), children: [
     /* @__PURE__ */ h("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
       /* @__PURE__ */ m("label", { htmlFor: c, className: "mapui:text-xs mapui:text-gray-400 mapui:w-8", children: "From" }),
       /* @__PURE__ */ m(
@@ -152,7 +152,7 @@ function P({ field: e, value: t, onChange: u, className: d = "", id: N }) {
     const x = t && typeof t == "object" && "min" in t ? t.min : void 0;
     u(a === "" ? x === void 0 ? void 0 : { min: x, max: e.max ?? 0 } : { min: x ?? e.min ?? 0, max: Number(a) });
   }, r = t && typeof t == "object" && "value" in t ? String(t.value) : "", v = t && typeof t == "object" && "min" in t ? String(t.min) : "", b = t && typeof t == "object" && "max" in t ? String(t.max) : "";
-  return /* @__PURE__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1 ${d}`.trim(), children: [
+  return /* @__PURE__ */ h("div", { className: `mapui:flex mapui:flex-col mapui:gap-1.5 ${d}`.trim(), children: [
     /* @__PURE__ */ m(
       "select",
       {
@@ -264,9 +264,9 @@ function _({
     !f && /* @__PURE__ */ m("h3", { className: "mapui:m-0 mapui:mb-2 mapui:text-sm mapui:font-semibold mapui:text-gray-700", children: "Search & Filter" }),
     c.map((p) => {
       const o = t[p.id] ?? {}, g = Object.values(o).some(q);
-      return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-2 mapui:border-b mapui:border-gray-100 mapui:pb-2 last:mapui:border-0", children: [
+      return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-3 mapui:border-b mapui:border-gray-100 mapui:pb-3 last:mapui:border-0", children: [
         /* @__PURE__ */ h("div", { className: "mapui:flex mapui:items-center mapui:justify-between", children: [
-          /* @__PURE__ */ m("span", { className: "mapui:text-xs mapui:font-medium mapui:text-gray-600", children: p.label }),
+          /* @__PURE__ */ m("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-600", children: p.label }),
           g && /* @__PURE__ */ m(
             "button",
             {
@@ -279,7 +279,7 @@ function _({
         ] }),
         p.search.fields.map((i) => {
           const r = o[i.property], v = `${p.id}:${i.property}`, b = `search-${p.id}-${i.property}`;
-          return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
+          return /* @__PURE__ */ h("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
             /* @__PURE__ */ m("label", { htmlFor: b, className: "mapui:text-xs mapui:text-gray-500", children: i.label }),
             i.type === "text" && i.autocomplete ? /* @__PURE__ */ m(
               V,

package/dist/components/CollapsibleControl/index.js

@@ -1,4 +1,4 @@
-import { C as r } from "../../CollapsibleControl-VFUTWb_5.js";
+import { C as r } from "../../CollapsibleControl-CGRNPpCw.js";
 export {
   r as CollapsibleControl
 };

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

@@ -1 +1 @@
-{"version":3,"file":"LayerEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LayerEditor/LayerEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAgBhF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAKD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,EAAE,gBAAgB,2CAmOlG"}
+{"version":3,"file":"LayerEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LayerEditor/LayerEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAkC,MAAM,aAAa,CAAC;AA2B7F,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAKD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,EAAE,gBAAgB,2CAuQlG"}

package/dist/components/Legend/index.js

@@ -1,4 +1,4 @@
-import { L as r } from "../../Legend-B6uIqOSw.js";
+import { L as r } from "../../Legend-BiRyrZL1.js";
 export {
   r as Legend
 };

package/dist/components/LegendEditor/LegendEditor.d.ts

@@ -2,7 +2,7 @@ import { LegendConfig, StyleConfig } from '../../types';
 export interface LegendEditorProps {
     value: LegendConfig | undefined;
     onChange: (legend: LegendConfig | undefined) => void;
-    style?: StyleConfig;
+    styles?: StyleConfig[];
 }
-export declare function LegendEditor({ value, onChange, style }: LegendEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function LegendEditor({ value, onChange, styles }: LegendEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LegendEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LegendEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendEditor/LegendEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAe,WAAW,EAAE,MAAM,aAAa,CAAC;AAW1E,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAeD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CA8NzE"}
+{"version":3,"file":"LegendEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendEditor/LegendEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAe,WAAW,EAAE,MAAM,aAAa,CAAC;AAW1E,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAeD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAuO1E"}

package/dist/components/SearchPanel/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../../SearchPanel-DCY01Wa-.js";
+import { S as r } from "../../SearchPanel-DtLXMoVs.js";
 export {
   r as SearchPanel
 };