@tedi-design-system/react 18.1.0-rc.4 → 18.1.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.1.0-rc.4",
+  "version": "18.1.0-rc.6",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/map-components/base-map-selection/base-map-option.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),e=require("./base-map-selection.module.scss.cjs.js"),l=o=>{const{title:r,content:c,selected:d,onSelect:t,type:n="selection",className:u,id:p,multiple:m,disabled:a}=o,b=()=>{a||t==null||t()},f=i=>{a||(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),t==null||t())},_=v.default(e.default["tedi-base-map-selection__wrapper"],d&&e.default["tedi-base-map-selection--selected"],n&&e.default[`tedi-base-map-selection--${n}`],m&&e.default["tedi-base-map-selection--multiple"],a&&e.default["tedi-base-map-selection--disabled"],u);return s.jsxs("div",{role:"button",tabIndex:a?-1:0,"aria-pressed":!!d,"aria-disabled":a||void 0,onClick:b,onKeyDown:f,className:_,id:p,children:[s.jsx("div",{"aria-hidden":!0,className:e.default["tedi-base-map-selection__content"],children:c}),s.jsx("div",{className:e.default["tedi-base-map-selection__title"],children:r})]})};l.displayName="BaseMapOption";exports.BaseMapOption=l;exports.default=l;

package/src/community/components/map-components/base-map-selection/base-map-option.d.ts

@@ -0,0 +1,51 @@
+import { JSX } from 'react';
+export type BaseMapOptionType = 'button' | 'historical' | 'selection';
+export interface BaseMapOptionProps {
+    /**
+     * The title displayed within the option.
+     */
+    title: string;
+    /**
+     * The main content of the option, typically a thumbnail. Can be any valid React node.
+     */
+    content: React.ReactNode;
+    /**
+     * Indicates whether the option is currently selected.
+     * Used to apply specific visual styles.
+     */
+    selected?: boolean;
+    /**
+     * Callback triggered when the option is clicked
+     * or activated via keyboard (Enter or Space).
+     */
+    onSelect?: () => void;
+    /**
+     * The type of the option, which controls styling.
+     * - `'selection'`: thumbnail with the title rendered below (default)
+     * - `'button'`: square thumbnail with the title overlaid
+     * - `'historical'`: styled for historical context
+     * @default 'selection'
+     */
+    type?: BaseMapOptionType;
+    /**
+     * Optional custom class name to apply additional styles.
+     */
+    className?: string;
+    /**
+     * HTML `id` attribute to identify the element.
+     */
+    id: string;
+    /**
+     * When `true`, renders a "stacked" visual indicating multiple maps.
+     */
+    multiple?: boolean;
+    /**
+     * Applies disabled style.
+     */
+    disabled?: boolean;
+}
+export declare const BaseMapOption: {
+    (props: BaseMapOptionProps): JSX.Element;
+    displayName: string;
+};
+export default BaseMapOption;

package/src/community/components/map-components/base-map-selection/base-map-option.es.js

@@ -0,0 +1,39 @@
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import h from "../../../../../external/classnames/index.es.js";
+import e from "./base-map-selection.module.scss.es.js";
+const N = (d) => {
+  const { title: o, content: r, selected: i, onSelect: t, type: n = "selection", className: c, id: p, multiple: m, disabled: s } = d, b = () => {
+    s || t == null || t();
+  }, u = (a) => {
+    s || (a.key === "Enter" || a.key === " ") && (a.preventDefault(), t == null || t());
+  }, f = h(
+    e["tedi-base-map-selection__wrapper"],
+    i && e["tedi-base-map-selection--selected"],
+    n && e[`tedi-base-map-selection--${n}`],
+    m && e["tedi-base-map-selection--multiple"],
+    s && e["tedi-base-map-selection--disabled"],
+    c
+  );
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      role: "button",
+      tabIndex: s ? -1 : 0,
+      "aria-pressed": !!i,
+      "aria-disabled": s || void 0,
+      onClick: b,
+      onKeyDown: u,
+      className: f,
+      id: p,
+      children: [
+        /* @__PURE__ */ l("div", { "aria-hidden": !0, className: e["tedi-base-map-selection__content"], children: r }),
+        /* @__PURE__ */ l("div", { className: e["tedi-base-map-selection__title"], children: o })
+      ]
+    }
+  );
+};
+N.displayName = "BaseMapOption";
+export {
+  N as BaseMapOption,
+  N as default
+};

package/src/community/components/map-components/base-map-selection/base-map-selection.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),e=require("./base-map-selection.module.scss.cjs.js"),f=n=>{const{title:i,content:c,selected:o,onSelect:t,type:s="button",className:d,id:u,multiple:r}=n,p=a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),t==null||t())},m=b.default(e.default["tedi-base-map-selection__wrapper"],o&&e.default["tedi-base-map-selection--selected"],s&&e.default[`tedi-base-map-selection--${s}`],r&&e.default["tedi-base-map-selection--multiple"],d);return l.jsxs("div",{role:"button",tabIndex:0,onClick:t,onKeyDown:p,className:m,id:u,children:[l.jsx("div",{className:e.default["tedi-base-map-selection__content"],children:c}),l.jsx("div",{className:e.default["tedi-base-map-selection__title"],children:i})]})};exports.BaseMapSelection=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),B=require("../../../../tedi/components/buttons/button/button.cjs.js"),T=require("../../../../tedi/components/form/field/field.cjs.js"),O=require("../../../../tedi/components/form/input-group/input-group.cjs.js"),C=require("../../../../tedi/components/form/slider/slider.cjs.js"),f=require("./base-map-option.cjs.js"),n=require("./base-map-selection.module.scss.cjs.js"),l=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),L=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),P=require("../../../../tedi/components/form/input-group/components/suffix/suffix.cjs.js"),c=a=>{const t=Number(a);return Number.isNaN(t)?0:Math.min(100,Math.max(0,t))};function o(a){const{title:t,content:x,children:h,multiple:y=!1,showTransparency:j=!1,transparency:d,defaultTransparency:_,onTransparencyChange:s,transparencyLabel:r="",id:i}=a,p=d!==void 0,[v,g]=S.useState(()=>c(_??0)),u=c(p?d:v),m=M=>{const b=c(M);p||g(b),s==null||s(b)},q=N.default(n.default["tedi-base-map-selection__wrapper"],n.default["tedi-base-map-selection__trigger"],n.default["tedi-base-map-selection--button"],y&&n.default["tedi-base-map-selection--multiple"]);return e.jsxs(l.Popover,{placement:"top-end",children:[e.jsx(l.Popover.Trigger,{children:e.jsxs(B.Button,{noStyle:!0,id:i,className:q,children:[e.jsx("div",{className:n.default["tedi-base-map-selection__content"],"aria-hidden":!0,children:x}),e.jsx("div",{className:n.default["tedi-base-map-selection__title"],children:t})]})}),e.jsxs(l.Popover.Content,{width:"medium",children:[e.jsx("div",{className:n.default["tedi-base-map-selection__options"],children:h}),j&&e.jsx("div",{className:n.default["tedi-base-map-selection__transparency"],children:e.jsx(C.Slider,{label:r,"aria-label":r||"Transparency",min:0,max:100,value:u,onChange:m,minLabel:"0%",maxLabel:"100%",addonRight:e.jsx("div",{className:n.default["tedi-base-map-selection__transparency-field"],children:e.jsxs(O.InputGroupBase,{id:`${i}-transparency`,label:r||"Transparency",hideLabel:!0,children:[e.jsx(L.Input,{children:e.jsx(T.Field,{type:"number",id:`${i}-transparency`,value:String(u),onChange:m})}),e.jsx(P.Suffix,{children:"%"})]})})})})]})]})}o.Option=f.BaseMapOption;o.displayName="BaseMapSelection";exports.BaseMapOption=f.BaseMapOption;exports.BaseMapSelection=o;

package/src/community/components/map-components/base-map-selection/base-map-selection.d.ts

@@ -1,44 +1,59 @@
 import { JSX } from 'react';
-type BaseMapSelectionType = 'button' | 'historical' | 'selection';
+import { default as BaseMapOption } from './base-map-option';
 export interface BaseMapSelectionProps {
     /**
-     * The title displayed within the component.
+     * Title of the trigger button and used as its accessible label.
      */
     title: string;
     /**
-     * The main content of the selection card. Can be any valid React node.
+     * Visual content (thumbnail) of the currently active base map, shown on the trigger button.
      */
     content: React.ReactNode;
     /**
-     * Indicates whether the current item is selected.
-     * Used to apply specific visual styles.
+     * Selectable base map options rendered inside the popover, typically `BaseMapSelection.Option` elements.
      */
-    selected?: boolean;
+    children: React.ReactNode;
     /**
-     * Callback function triggered when the selection is clicked
-     * or activated via keyboard (Enter or Space).
+     * Renders a "stacked" trigger, indicating that multiple base maps are available.
+     * @default false
      */
-    onSelect?: () => void;
+    multiple?: boolean;
     /**
-     * The type of the selection, which controls styling.
-     * - `'button'`: default interactive selection
-     * - `'historical'`: styled for historical context
-     * - `'selection'`: styled for multi-selection context
+     * When `true`, renders a transparency slider at the bottom of the popover.
+     * @default false
      */
-    type: BaseMapSelectionType;
+    showTransparency?: boolean;
     /**
-     * Optional custom class name to apply additional styles.
+     * Controlled transparency value (0-100). Use together with `onTransparencyChange`.
+     * Values outside the range are clamped. Omit for uncontrolled usage.
      */
-    className?: string;
+    transparency?: number;
     /**
-     * Optional HTML `id` attribute to identify the element.
+     * Initial transparency value (0-100) for uncontrolled usage. Ignored when `transparency` is provided.
+     * @default 0
      */
-    id?: string;
+    defaultTransparency?: number;
     /**
-     * When `true`, indicates that multiple selections are allowed.
-     * Affects the visual style.
+     * Callback fired when the transparency value changes. The reported value is always clamped to 0-100.
      */
-    multiple?: boolean;
+    onTransparencyChange?: (value: number) => void;
+    /**
+     * Label for the transparency slider.
+     */
+    transparencyLabel?: string;
+    /**
+     * HTML `id` attribute applied to the trigger button.
+     */
+    id: string;
+}
+export declare function BaseMapSelection(props: BaseMapSelectionProps): JSX.Element;
+export declare namespace BaseMapSelection {
+    var Option: {
+        (props: import("./base-map-option").BaseMapOptionProps): JSX.Element;
+        displayName: string;
+    };
+    var displayName: string;
 }
-export declare const BaseMapSelection: (props: BaseMapSelectionProps) => JSX.Element;
+export type { BaseMapOptionProps, BaseMapOptionType } from './base-map-option';
+export { BaseMapOption };
 export default BaseMapSelection;

package/src/community/components/map-components/base-map-selection/base-map-selection.es.js

@@ -1,21 +1,80 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import y from "../../../../../external/classnames/index.es.js";
-import e from "./base-map-selection.module.scss.es.js";
-const h = (n) => {
-  const { title: l, content: o, selected: c, onSelect: t, type: i = "button", className: m, id: p, multiple: d } = n, r = (s) => {
-    (s.key === "Enter" || s.key === " ") && (s.preventDefault(), t == null || t());
-  }, b = y(
-    e["tedi-base-map-selection__wrapper"],
-    c && e["tedi-base-map-selection--selected"],
-    i && e[`tedi-base-map-selection--${i}`],
-    d && e["tedi-base-map-selection--multiple"],
-    m
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import B from "../../../../../external/classnames/index.es.js";
+import { useState as M } from "react";
+import { Button as C } from "../../../../tedi/components/buttons/button/button.es.js";
+import { Field as L } from "../../../../tedi/components/form/field/field.es.js";
+import { InputGroupBase as w } from "../../../../tedi/components/form/input-group/input-group.es.js";
+import { Slider as j } from "../../../../tedi/components/form/slider/slider.es.js";
+import { BaseMapOption as I } from "./base-map-option.es.js";
+import a from "./base-map-selection.module.scss.es.js";
+import { Popover as l } from "../../../../tedi/components/overlays/popover/popover.es.js";
+import { Input as O } from "../../../../tedi/components/form/input-group/components/input/input.es.js";
+import { Suffix as $ } from "../../../../tedi/components/form/input-group/components/suffix/suffix.es.js";
+const c = (r) => {
+  const n = Number(r);
+  return Number.isNaN(n) ? 0 : Math.min(100, Math.max(0, n));
+};
+function f(r) {
+  const {
+    title: n,
+    content: b,
+    children: y,
+    multiple: _ = !1,
+    showTransparency: N = !1,
+    transparency: m,
+    defaultTransparency: g,
+    onTransparencyChange: i,
+    transparencyLabel: s = "",
+    id: o
+  } = r, p = m !== void 0, [v, x] = M(
+    () => c(g ?? 0)
+  ), d = c(p ? m : v), u = (S) => {
+    const h = c(S);
+    p || x(h), i == null || i(h);
+  }, T = B(
+    a["tedi-base-map-selection__wrapper"],
+    a["tedi-base-map-selection__trigger"],
+    a["tedi-base-map-selection--button"],
+    _ && a["tedi-base-map-selection--multiple"]
   );
-  return /* @__PURE__ */ u("div", { role: "button", tabIndex: 0, onClick: t, onKeyDown: r, className: b, id: p, children: [
-    /* @__PURE__ */ a("div", { className: e["tedi-base-map-selection__content"], children: o }),
-    /* @__PURE__ */ a("div", { className: e["tedi-base-map-selection__title"], children: l })
+  return /* @__PURE__ */ t(l, { placement: "top-end", children: [
+    /* @__PURE__ */ e(l.Trigger, { children: /* @__PURE__ */ t(C, { noStyle: !0, id: o, className: T, children: [
+      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__content"], "aria-hidden": !0, children: b }),
+      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__title"], children: n })
+    ] }) }),
+    /* @__PURE__ */ t(l.Content, { width: "medium", children: [
+      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__options"], children: y }),
+      N && /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__transparency"], children: /* @__PURE__ */ e(
+        j,
+        {
+          label: s,
+          "aria-label": s || "Transparency",
+          min: 0,
+          max: 100,
+          value: d,
+          onChange: u,
+          minLabel: "0%",
+          maxLabel: "100%",
+          addonRight: /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__transparency-field"], children: /* @__PURE__ */ t(w, { id: `${o}-transparency`, label: s || "Transparency", hideLabel: !0, children: [
+            /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
+              L,
+              {
+                type: "number",
+                id: `${o}-transparency`,
+                value: String(d),
+                onChange: u
+              }
+            ) }),
+            /* @__PURE__ */ e($, { children: "%" })
+          ] }) })
+        }
+      ) })
+    ] })
   ] });
-};
+}
+f.Option = I;
+f.displayName = "BaseMapSelection";
 export {
-  h as BaseMapSelection
+  I as BaseMapOption,
+  f as BaseMapSelection
 };

package/src/community/components/map-components/base-map-selection/base-map-selection.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-base-map-selection__wrapper":"tedi-base-map-selection__wrapper-aae7464f","tedi-base-map-selection__content":"tedi-base-map-selection__content-3145448d","tedi-base-map-selection--historical":"tedi-base-map-selection--historical-159d3def","tedi-base-map-selection__title":"tedi-base-map-selection__title-d46b74ec","tedi-map-selection__title":"tedi-map-selection__title-20651d60","tedi-base-map-selection--selected":"tedi-base-map-selection--selected-914a0483","tedi-base-map-selection--button":"tedi-base-map-selection--button-0e9e36f4","tedi-base-map-selection--selection":"tedi-base-map-selection--selection-910cae90","tedi-base-map-selection--multiple":"tedi-base-map-selection--multiple-58cb365c"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-base-map-selection__wrapper":"tedi-base-map-selection__wrapper-aae7464f","tedi-base-map-selection__content":"tedi-base-map-selection__content-3145448d","tedi-base-map-selection__options":"tedi-base-map-selection__options-dce549ce","tedi-base-map-selection__transparency":"tedi-base-map-selection__transparency-d4be551d","tedi-base-map-selection__transparency-field":"tedi-base-map-selection__transparency-field-d8b5a065","tedi-base-map-selection--historical":"tedi-base-map-selection--historical-159d3def","tedi-base-map-selection__title":"tedi-base-map-selection__title-d46b74ec","tedi-base-map-selection--selected":"tedi-base-map-selection--selected-914a0483","tedi-base-map-selection--disabled":"tedi-base-map-selection--disabled-a957b2c8","tedi-base-map-selection--button":"tedi-base-map-selection--button-0e9e36f4","tedi-base-map-selection--selection":"tedi-base-map-selection--selection-910cae90","tedi-base-map-selection--multiple":"tedi-base-map-selection--multiple-58cb365c"};exports.default=e;

package/src/community/components/map-components/base-map-selection/base-map-selection.module.scss.es.js

@@ -1,10 +1,13 @@
 const e = {
   "tedi-base-map-selection__wrapper": "tedi-base-map-selection__wrapper-aae7464f",
   "tedi-base-map-selection__content": "tedi-base-map-selection__content-3145448d",
+  "tedi-base-map-selection__options": "tedi-base-map-selection__options-dce549ce",
+  "tedi-base-map-selection__transparency": "tedi-base-map-selection__transparency-d4be551d",
+  "tedi-base-map-selection__transparency-field": "tedi-base-map-selection__transparency-field-d8b5a065",
   "tedi-base-map-selection--historical": "tedi-base-map-selection--historical-159d3def",
   "tedi-base-map-selection__title": "tedi-base-map-selection__title-d46b74ec",
-  "tedi-map-selection__title": "tedi-map-selection__title-20651d60",
   "tedi-base-map-selection--selected": "tedi-base-map-selection--selected-914a0483",
+  "tedi-base-map-selection--disabled": "tedi-base-map-selection--disabled-a957b2c8",
   "tedi-base-map-selection--button": "tedi-base-map-selection--button-0e9e36f4",
   "tedi-base-map-selection--selection": "tedi-base-map-selection--selection-910cae90",
   "tedi-base-map-selection--multiple": "tedi-base-map-selection--multiple-58cb365c"

package/src/community/components/map-components/split-pane/split-pane.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),P=require("../../../../../external/classnames/index.cjs.js"),p=require("react"),I=require("../../../../tedi/components/base/icon/icon.cjs.js"),K=require("../../../../tedi/components/buttons/button/button.cjs.js"),s=require("./split-pane.module.scss.cjs.js"),O=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),B=20,F=80,M=2,S=(c,a,d)=>Math.max(a,Math.min(d,c)),U=(c,a)=>c?a==="first"?"right":"left":a==="first"?"bottom":"top",A=({direction:c,side:a})=>{const d=U(c==="horizontal",a);return i.jsx("div",{"data-testid":"active-pane-ring","aria-hidden":!0,className:P.default(s.default["tedi-split-pane__ring"],s.default[`tedi-split-pane__ring--omit-${d}`])})},T=c=>{const{first:a,second:d,direction:m,highlightedSide:E,onClose:y,initialRatio:b=50,minRatio:f=B,maxRatio:h=F,onRatioChange:x}=c,{getLabel:g}=O.useLabels(),[v,N]=p.useState(()=>S(b,f,h)),_=p.useRef(v),R=p.useRef(null),r=p.useRef(null),l=m==="horizontal",w=e=>{const o=S(e,f,h);_.current=o,N(o)},L=(e,o)=>{if(!R.current)return;const n=R.current.getBoundingClientRect(),t=l?n.width:n.height;if(t<=0)return;const u=l?(e-n.left)/t*100:(o-n.top)/t*100;w(u)},j=()=>{x==null||x(_.current)},D=()=>{const e=t=>L(t.clientX,t.clientY),o=t=>{const u=t.touches[0];u&&L(u.clientX,u.clientY)},n=()=>{var t;(t=r.current)==null||t.call(r),j()};r.current=()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",n),r.current=null},document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),document.addEventListener("touchmove",o),document.addEventListener("touchend",n)};p.useEffect(()=>()=>{var e;(e=r.current)==null||e.call(r)},[]);const q=e=>{e.preventDefault(),D()},z=()=>{D()},k=e=>{const o=l?"ArrowLeft":"ArrowUp",n=l?"ArrowRight":"ArrowDown";let t=null;e.key===o?t=_.current-M:e.key===n?t=_.current+M:e.key==="Home"?t=f:e.key==="End"&&(t=h),t!==null&&(e.preventDefault(),w(t),j())};return i.jsxs("div",{ref:R,"data-testid":"split-pane",className:P.default(s.default["tedi-split-pane"],s.default[`tedi-split-pane--${m}`]),children:[i.jsxs("div",{"data-testid":"split-pane-first",className:s.default["tedi-split-pane__pane"],style:{flexGrow:v},children:[a,E==="first"&&i.jsx(A,{direction:m,side:"first"})]}),i.jsxs("div",{role:"separator",tabIndex:0,"aria-orientation":l?"vertical":"horizontal","aria-valuemin":f,"aria-valuemax":h,"aria-valuenow":Math.round(v),"aria-label":g("splitPaneResize"),"data-testid":"split-pane-divider",className:s.default["tedi-split-pane__divider"],onMouseDown:q,onTouchStart:z,onKeyDown:k,children:[i.jsx("span",{"data-testid":"split-pane-handle","aria-hidden":!0,className:s.default["tedi-split-pane__handle"],children:i.jsx(I.Icon,{name:l?"code":"unfold_more",size:18})}),y&&i.jsx("div",{className:s.default["tedi-split-pane__close"],children:i.jsx(K.Button,{"data-testid":"split-pane-close",visualType:"secondary",icon:"close",onClick:y,onMouseDown:e=>e.stopPropagation(),children:g("close")})})]}),i.jsxs("div",{"data-testid":"split-pane-second",className:s.default["tedi-split-pane__pane"],style:{flexGrow:100-v},children:[d,E==="second"&&i.jsx(A,{direction:m,side:"second"})]})]})};T.displayName="SplitPane";exports.SplitPane=T;

package/src/community/components/map-components/split-pane/split-pane.d.ts

@@ -0,0 +1,37 @@
+import { JSX, ReactNode } from 'react';
+type PaneSide = 'first' | 'second';
+type SplitPaneDirection = 'horizontal' | 'vertical';
+export interface SplitPaneProps {
+    /** Content of the first (left in horizontal, top in vertical) pane. */
+    first: ReactNode;
+    /** Content of the second (right in horizontal, bottom in vertical) pane. */
+    second: ReactNode;
+    /** Layout axis: `horizontal` places panes side by side, `vertical` stacks them. */
+    direction: SplitPaneDirection;
+    /** Draws an accent ring around the given pane to mark it as active. */
+    highlightedSide?: PaneSide;
+    /** When provided, renders a close button on the divider. */
+    onClose?: () => void;
+    /**
+     * Initial size of the first pane as a percentage of the container, clamped to `minRatio`–`maxRatio`.
+     * @default 50
+     */
+    initialRatio?: number;
+    /**
+     * Minimum size of the first pane, as a percentage of the container.
+     * @default 20
+     */
+    minRatio?: number;
+    /**
+     * Maximum size of the first pane, as a percentage of the container.
+     * @default 80
+     */
+    maxRatio?: number;
+    /** Called with the final ratio (%) when a drag or keyboard adjustment event ends. */
+    onRatioChange?: (ratio: number) => void;
+}
+export declare const SplitPane: {
+    (props: SplitPaneProps): JSX.Element;
+    displayName: string;
+};
+export default SplitPane;

package/src/community/components/map-components/split-pane/split-pane.es.js

@@ -0,0 +1,128 @@
+import { jsxs as _, jsx as c } from "react/jsx-runtime";
+import z from "../../../../../external/classnames/index.es.js";
+import { useState as O, useRef as y, useEffect as B } from "react";
+import { Icon as F } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Button as U } from "../../../../tedi/components/buttons/button/button.es.js";
+import i from "./split-pane.module.scss.es.js";
+import { useLabels as X } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+const Y = 20, j = 80, N = 2, T = (a, s, d) => Math.max(s, Math.min(d, a)), G = (a, s) => a ? s === "first" ? "right" : "left" : s === "first" ? "bottom" : "top", S = ({ direction: a, side: s }) => {
+  const d = G(a === "horizontal", s);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-testid": "active-pane-ring",
+      "aria-hidden": !0,
+      className: z(i["tedi-split-pane__ring"], i[`tedi-split-pane__ring--omit-${d}`])
+    }
+  );
+}, H = (a) => {
+  const {
+    first: s,
+    second: d,
+    direction: m,
+    highlightedSide: R,
+    onClose: g,
+    initialRatio: P = 50,
+    minRatio: p = Y,
+    maxRatio: h = j,
+    onRatioChange: E
+  } = a, { getLabel: L } = X(), [f, b] = O(() => T(P, p, h)), v = y(f), w = y(null), r = y(null), l = m === "horizontal", D = (e) => {
+    const o = T(e, p, h);
+    v.current = o, b(o);
+  }, M = (e, o) => {
+    if (!w.current)
+      return;
+    const n = w.current.getBoundingClientRect(), t = l ? n.width : n.height;
+    if (t <= 0)
+      return;
+    const u = l ? (e - n.left) / t * 100 : (o - n.top) / t * 100;
+    D(u);
+  }, x = () => {
+    E == null || E(v.current);
+  }, A = () => {
+    const e = (t) => M(t.clientX, t.clientY), o = (t) => {
+      const u = t.touches[0];
+      u && M(u.clientX, u.clientY);
+    }, n = () => {
+      var t;
+      (t = r.current) == null || t.call(r), x();
+    };
+    r.current = () => {
+      document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", n), document.removeEventListener("touchmove", o), document.removeEventListener("touchend", n), r.current = null;
+    }, document.addEventListener("mousemove", e), document.addEventListener("mouseup", n), document.addEventListener("touchmove", o), document.addEventListener("touchend", n);
+  };
+  B(() => () => {
+    var e;
+    (e = r.current) == null || e.call(r);
+  }, []);
+  const k = (e) => {
+    e.preventDefault(), A();
+  }, I = () => {
+    A();
+  }, K = (e) => {
+    const o = l ? "ArrowLeft" : "ArrowUp", n = l ? "ArrowRight" : "ArrowDown";
+    let t = null;
+    e.key === o ? t = v.current - N : e.key === n ? t = v.current + N : e.key === "Home" ? t = p : e.key === "End" && (t = h), t !== null && (e.preventDefault(), D(t), x());
+  };
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      ref: w,
+      "data-testid": "split-pane",
+      className: z(i["tedi-split-pane"], i[`tedi-split-pane--${m}`]),
+      children: [
+        /* @__PURE__ */ _("div", { "data-testid": "split-pane-first", className: i["tedi-split-pane__pane"], style: { flexGrow: f }, children: [
+          s,
+          R === "first" && /* @__PURE__ */ c(S, { direction: m, side: "first" })
+        ] }),
+        /* @__PURE__ */ _(
+          "div",
+          {
+            role: "separator",
+            tabIndex: 0,
+            "aria-orientation": l ? "vertical" : "horizontal",
+            "aria-valuemin": p,
+            "aria-valuemax": h,
+            "aria-valuenow": Math.round(f),
+            "aria-label": L("splitPaneResize"),
+            "data-testid": "split-pane-divider",
+            className: i["tedi-split-pane__divider"],
+            onMouseDown: k,
+            onTouchStart: I,
+            onKeyDown: K,
+            children: [
+              /* @__PURE__ */ c("span", { "data-testid": "split-pane-handle", "aria-hidden": !0, className: i["tedi-split-pane__handle"], children: /* @__PURE__ */ c(F, { name: l ? "code" : "unfold_more", size: 18 }) }),
+              g && /* @__PURE__ */ c("div", { className: i["tedi-split-pane__close"], children: /* @__PURE__ */ c(
+                U,
+                {
+                  "data-testid": "split-pane-close",
+                  visualType: "secondary",
+                  icon: "close",
+                  onClick: g,
+                  onMouseDown: (e) => e.stopPropagation(),
+                  children: L("close")
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _(
+          "div",
+          {
+            "data-testid": "split-pane-second",
+            className: i["tedi-split-pane__pane"],
+            style: { flexGrow: 100 - f },
+            children: [
+              d,
+              R === "second" && /* @__PURE__ */ c(S, { direction: m, side: "second" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+H.displayName = "SplitPane";
+export {
+  H as SplitPane
+};

package/src/community/components/map-components/split-pane/split-pane.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-split-pane":"tedi-split-pane-2f8739d4","tedi-split-pane--horizontal":"tedi-split-pane--horizontal-89c953f4","tedi-split-pane--vertical":"tedi-split-pane--vertical-ca3d67c4","tedi-split-pane__pane":"tedi-split-pane__pane-96c0c744","tedi-split-pane__divider":"tedi-split-pane__divider-096d4854","tedi-split-pane__handle":"tedi-split-pane__handle-373bdc4c","tedi-split-pane__close":"tedi-split-pane__close-928a5d26","tedi-split-pane__ring":"tedi-split-pane__ring-70ed59d7","tedi-split-pane__ring--omit-top":"tedi-split-pane__ring--omit-top-1037b0f4","tedi-split-pane__ring--omit-right":"tedi-split-pane__ring--omit-right-7955a195","tedi-split-pane__ring--omit-bottom":"tedi-split-pane__ring--omit-bottom-aa8724f3","tedi-split-pane__ring--omit-left":"tedi-split-pane__ring--omit-left-c20a6747"};exports.default=i;

package/src/community/components/map-components/split-pane/split-pane.module.scss.es.js

@@ -0,0 +1,17 @@
+const i = {
+  "tedi-split-pane": "tedi-split-pane-2f8739d4",
+  "tedi-split-pane--horizontal": "tedi-split-pane--horizontal-89c953f4",
+  "tedi-split-pane--vertical": "tedi-split-pane--vertical-ca3d67c4",
+  "tedi-split-pane__pane": "tedi-split-pane__pane-96c0c744",
+  "tedi-split-pane__divider": "tedi-split-pane__divider-096d4854",
+  "tedi-split-pane__handle": "tedi-split-pane__handle-373bdc4c",
+  "tedi-split-pane__close": "tedi-split-pane__close-928a5d26",
+  "tedi-split-pane__ring": "tedi-split-pane__ring-70ed59d7",
+  "tedi-split-pane__ring--omit-top": "tedi-split-pane__ring--omit-top-1037b0f4",
+  "tedi-split-pane__ring--omit-right": "tedi-split-pane__ring--omit-right-7955a195",
+  "tedi-split-pane__ring--omit-bottom": "tedi-split-pane__ring--omit-bottom-aa8724f3",
+  "tedi-split-pane__ring--omit-left": "tedi-split-pane__ring--omit-left-c20a6747"
+};
+export {
+  i as default
+};

package/src/community/index.d.ts

@@ -52,4 +52,5 @@ export * from './components/map-components/right-panel/right-panel';
 export * from './components/map-components/scale-bar/scale-bar';
 export * from './components/map-components/map-select/map-select';
 export * from './components/map-components/sheet/sheet';
+export * from './components/map-components/split-pane/split-pane';
 export * from './components/map-components/timeline/timeline';