@lokalise/harmony 1.1.0 → 1.3.0

package/dist/harmony.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=()=>e.jsx("div",{children:"Navigation Panel"});exports.NavigationPanel=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),S=require("react"),Te=require("date-fns"),qe=require("date-fns-tz");function Le(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const w=Le(S);var x=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function Se(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var L,re;function Y(){if(re)return L;re=1;function e(r){var n=typeof r;return r!=null&&(n=="object"||n=="function")}return L=e,L}var A,te;function Ae(){if(te)return A;te=1;var e=typeof x=="object"&&x&&x.Object===Object&&x;return A=e,A}var D,ne;function Ee(){if(ne)return D;ne=1;var e=Ae(),r=typeof self=="object"&&self&&self.Object===Object&&self,n=e||r||Function("return this")();return D=n,D}var k,ie;function De(){if(ie)return k;ie=1;var e=Ee(),r=function(){return e.Date.now()};return k=r,k}var C,oe;function ke(){if(oe)return C;oe=1;var e=/\s/;function r(n){for(var t=n.length;t--&&e.test(n.charAt(t)););return t}return C=r,C}var z,ae;function Ce(){if(ae)return z;ae=1;var e=ke(),r=/^\s+/;function n(t){return t&&t.slice(0,e(t)+1).replace(r,"")}return z=n,z}var M,se;function ye(){if(se)return M;se=1;var e=Ee(),r=e.Symbol;return M=r,M}var F,ue;function ze(){if(ue)return F;ue=1;var e=ye(),r=Object.prototype,n=r.hasOwnProperty,t=r.toString,i=e?e.toStringTag:void 0;function a(s){var u=n.call(s,i),c=s[i];try{s[i]=void 0;var o=!0}catch{}var l=t.call(s);return o&&(u?s[i]=c:delete s[i]),l}return F=a,F}var G,ce;function Me(){if(ce)return G;ce=1;var e=Object.prototype,r=e.toString;function n(t){return r.call(t)}return G=n,G}var B,le;function Fe(){if(le)return B;le=1;var e=ye(),r=ze(),n=Me(),t="[object Null]",i="[object Undefined]",a=e?e.toStringTag:void 0;function s(u){return u==null?u===void 0?i:t:a&&a in Object(u)?r(u):n(u)}return B=s,B}var U,fe;function Ge(){if(fe)return U;fe=1;function e(r){return r!=null&&typeof r=="object"}return U=e,U}var H,de;function Be(){if(de)return H;de=1;var e=Fe(),r=Ge(),n="[object Symbol]";function t(i){return typeof i=="symbol"||r(i)&&e(i)==n}return H=t,H}var W,be;function Ue(){if(be)return W;be=1;var e=Ce(),r=Y(),n=Be(),t=NaN,i=/^[-+]0x[0-9a-f]+$/i,a=/^0b[01]+$/i,s=/^0o[0-7]+$/i,u=parseInt;function c(o){if(typeof o=="number")return o;if(n(o))return t;if(r(o)){var l=typeof o.valueOf=="function"?o.valueOf():o;o=r(l)?l+"":l}if(typeof o!="string")return o===0?o:+o;o=e(o);var g=a.test(o);return g||s.test(o)?u(o.slice(2),g?2:8):i.test(o)?t:+o}return W=c,W}var $,ge;function Pe(){if(ge)return $;ge=1;var e=Y(),r=De(),n=Ue(),t="Expected a function",i=Math.max,a=Math.min;function s(u,c,o){var l,g,R,E,d,m,y=0,j=!1,b=!1,_=!0;if(typeof u!="function")throw new TypeError(t);c=n(c)||0,e(o)&&(j=!!o.leading,b="maxWait"in o,R=b?i(n(o.maxWait)||0,c):R,_="trailing"in o?!!o.trailing:_);function v(f){var P=l,p=g;return l=g=void 0,y=f,E=u.apply(p,P),E}function h(f){return y=f,d=setTimeout(N,c),j?v(f):E}function I(f){var P=f-m,p=f-y,ee=c-P;return b?a(ee,R-p):ee}function Q(f){var P=f-m,p=f-y;return m===void 0||P>=c||P<0||b&&p>=R}function N(){var f=r();if(Q(f))return V(f);d=setTimeout(N,I(f))}function V(f){return d=void 0,_&&l?v(f):(l=g=void 0,E)}function Ne(){d!==void 0&&clearTimeout(d),y=0,l=m=g=d=void 0}function xe(){return d===void 0?E:V(r())}function q(){var f=r(),P=Q(f);if(l=arguments,g=this,m=f,P){if(d===void 0)return h(m);if(b)return clearTimeout(d),d=setTimeout(N,c),v(m)}return d===void 0&&(d=setTimeout(N,c)),E}return q.cancel=Ne,q.flush=xe,q}return $=s,$}var He=Pe();const We=Se(He);var Z,he;function $e(){if(he)return Z;he=1;var e=Pe(),r=Y(),n="Expected a function";function t(i,a,s){var u=!0,c=!0;if(typeof i!="function")throw new TypeError(n);return r(s)&&(u="leading"in s?!!s.leading:u,c="trailing"in s?!!s.trailing:c),e(i,a,{leading:u,maxWait:a,trailing:c})}return Z=t,Z}var Ze=$e();const Xe=Se(Ze),Ye=(e,r,n,t)=>{switch(r){case"debounce":return We(e,n,t);case"throttle":return Xe(e,n,t);default:return e}},Je=e=>{const r=w.useRef(e);return w.useEffect(()=>{r.current=e}),w.useMemo(()=>(...n)=>{var t;return(t=r.current)===null||t===void 0?void 0:t.call(r,...n)},[])},Ke=e=>{const[r,n]=w.useState((e==null?void 0:e.current)||null);return e&&setTimeout(()=>{e.current!==r&&n(e.current)},0),{refProxy:w.useMemo(()=>new Proxy(i=>{i!==r&&n(i)},{get(i,a){return a==="current"?r:i[a]},set(i,a,s){return a==="current"?n(s):i[a]=s,!0}}),[r]),refElement:r,setRefElement:n}},Qe=(e,r)=>r==="border-box"?{width:e.borderBoxSize[0].inlineSize,height:e.borderBoxSize[0].blockSize}:r==="content-box"?{width:e.contentBoxSize[0].inlineSize,height:e.contentBoxSize[0].blockSize}:{width:e.contentRect.width,height:e.contentRect.height};function Ve({skipOnMount:e=!1,refreshMode:r,refreshRate:n=1e3,refreshOptions:t,handleWidth:i=!0,handleHeight:a=!0,targetRef:s,observerOptions:u,onResize:c}={}){const o=S.useRef(e),l=Je(c),[g,R]=S.useState({width:void 0,height:void 0}),{refProxy:E,refElement:d}=Ke(s),{box:m}=u||{},y=S.useCallback(b=>{if(!i&&!a)return;if(o.current){o.current=!1;return}const _=(v,h)=>i&&v.width!==h.width||a&&v.height!==h.height;b.forEach(v=>{const h=Qe(v,m);R(I=>_(I,h)?(l==null||l({width:h.width,height:h.height,entry:v}),h):I)})},[i,a,o,m]),j=S.useCallback(Ye(y,r,n,t),[y,r,n,t]);return S.useEffect(()=>{let b;return d?(b=new window.ResizeObserver(j),b.observe(d,u)):(g.width||g.height)&&(l==null||l({width:null,height:null,entry:null}),R({width:void 0,height:void 0})),()=>{var _,v,h;(_=b==null?void 0:b.disconnect)===null||_===void 0||_.call(b),(h=(v=j).cancel)===null||h===void 0||h.call(v)}},[j,d]),Object.assign({ref:E},g)}function Re(e){var r,n,t="";if(typeof e=="string"||typeof e=="number")t+=e;else if(typeof e=="object")if(Array.isArray(e)){var i=e.length;for(r=0;r<i;r++)e[r]&&(n=Re(e[r]))&&(t&&(t+=" "),t+=n)}else for(n in e)e[n]&&(t&&(t+=" "),t+=n);return t}function er(){for(var e,r,n=0,t="",i=arguments.length;n<i;n++)(e=arguments[n])&&(r=Re(e))&&(t&&(t+=" "),t+=r);return t}const rr="_headerContainer_1cubo_1",tr="_headerContent_1cubo_34",nr="_staticEnabled_1cubo_50",X={headerContainer:rr,headerContent:tr,staticEnabled:nr},ir=77,O=({sticky:e,children:r})=>{const{ref:n,height:t}=Ve({refreshMode:"debounce",refreshRate:0}),[i,a]=S.useState(!1),s=()=>i?!e:!0;S.useEffect(()=>{const c=()=>{a(window.scrollY>0)};return window.addEventListener("scroll",c),()=>window.removeEventListener("scroll",c)},[]);const u=`${t||ir}px`;return T.jsx("div",{style:{minHeight:u},children:T.jsx("div",{children:T.jsxs("div",{ref:n,className:er(X.headerContent,{[X.staticEnabled]:s()}),children:[T.jsx(O.Header,{}),T.jsx(O.Tabs,{}),r]})})})};O.Header=({children:e})=>T.jsx("div",{className:X.headerContainer,children:e});O.Tabs=({children:e})=>T.jsx("div",{className:"flex justify-between gap-2 nowrap",children:e});const J=0,je=9999,pe=[150,151,250,251],we=[152,153,252,253],Oe=[154,155,157,158,254,255,258,354,355,358],Ie=[156,159,160,256,259,260],K=9998,or=e=>e===J,ar=e=>e===je,sr=e=>pe.includes(e),ur=e=>we.includes(e),cr=e=>Oe.includes(e),lr=e=>Ie.includes(e),fr=e=>e>J&&e<K,dr=e=>e===K,br=/\n/,ve=(e,r,n)=>e.split(r).flatMap((t,i)=>i!==0?[S.cloneElement(n,{key:Math.random().toString(32).slice(0,10)}),t]:t),gr=(e,r,n)=>typeof e=="string"?ve(e,r,n):e.flatMap(t=>typeof t=="string"?ve(t,r,n):t),hr=e=>gr(e,br,T.jsx("br",{})),vr=/(\b(https?|):\/\/[-a-zA-Zа-яА-Я0-9+&@#/%?=~_|!:,.;]*[-a-zA-Zа-яА-Я0-9+&@#/%=~_|])/gi,mr=e=>e.match(vr)??[],me=(e,r,n)=>{const t=e.split(r);if(t.length===1)return e;const i=[];return t[0]!==""&&i.push(t[0]),t.shift(),t[t.length-1]===""&&t.pop(),i.push(T.jsx("a",{href:r,target:"_blank",rel:"noreferrer noopener",children:r},r+n)),i.push(t.join(r)),i.filter(a=>a!=="")},_e=e=>{const r=mr(e);return r!=null&&r.length?r.reduce((n,t,i)=>typeof n=="string"?me(n,t,i):n.flatMap(a=>typeof a=="string"?me(a,t,i):a),e):e},_r=e=>typeof e=="string"?_e(e):e.flatMap(r=>typeof r=="string"?_e(r):r,e),Tr=(e,r="PP")=>Te.format(e,r),Sr=(e,r,n="PP")=>Te.format(qe.toZonedTime(e,r),n);exports.ENTERPRISE_OPENSOURCE_PLAN_ID=K;exports.ENTERPRISE_PLAN_IDS=Ie;exports.ESSENTIAL_PLAN_IDS=we;exports.FREE_PLAN_ID=J;exports.NavigationPanel=O;exports.PRO_PLAN_IDS=Oe;exports.START_PLAN_IDS=pe;exports.TRIAL_PLAN_ID=je;exports.convertNewLineToBreakTag=hr;exports.formatDate=Tr;exports.formatDateTz=Sr;exports.isEnterpriseOpenSourcePlan=dr;exports.isEnterprisePlan=lr;exports.isEssentialPlan=ur;exports.isFreePlan=or;exports.isPaidPlan=fr;exports.isProPlan=cr;exports.isStartPlan=sr;exports.isTrialPlan=ar;exports.makeUrlClickable=_r;

package/dist/harmony.css

@@ -0,0 +1 @@
+._headerContainer_1cubo_1{display:flex;margin-bottom:var(--lok-spacing-1);width:100%;align-items:center}._navigationTabList_1cubo_8{display:flex;list-style:none;flex-wrap:wrap;margin:0 0 0 calc(-1 * var(--lok-spacing-6));padding:0}._navigationTab_1cubo_8{border:none;margin:0;border-bottom:2px solid transparent;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:var(--lok-typography-body-small-default);color:var(--lok-color-text-default);margin:0 0 0 var(--lok-spacing-6)}._navigationTab_1cubo_8[aria-selected=true]{font-weight:500;color:var(--lok-color-text-active);border-bottom-color:var(--lok-color-text-active)}._headerContent_1cubo_34{position:fixed;background-color:var(--lok-color-background-surface-default);top:0;left:95px;right:32px;z-index:899;padding-top:var(--lok-spacing-5);padding-left:30px;padding-right:30px;margin-left:-30px;margin-right:-30px;border-bottom:1px solid var(--lok-color-border-default)}._staticEnabled_1cubo_50{z-index:var(--lok-z-index-auto);position:relative;top:inherit;left:0;right:0;padding-top:0;box-shadow:none}

package/dist/harmony.mjs

@@ -1,5 +1,388 @@
-import { jsx as i } from "react/jsx-runtime";
-const n = () => /* @__PURE__ */ i("div", { children: "Navigation Panel" });
+import { jsx as E, jsxs as Ie } from "react/jsx-runtime";
+import * as w from "react";
+import { useRef as qe, useState as ve, useCallback as Q, useEffect as _e, cloneElement as xe } from "react";
+import { format as Te } from "date-fns";
+import { toZonedTime as Ne } from "date-fns-tz";
+var I = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Se(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var N, V;
+function X() {
+  if (V) return N;
+  V = 1;
+  function e(r) {
+    var n = typeof r;
+    return r != null && (n == "object" || n == "function");
+  }
+  return N = e, N;
+}
+var L, ee;
+function Le() {
+  if (ee) return L;
+  ee = 1;
+  var e = typeof I == "object" && I && I.Object === Object && I;
+  return L = e, L;
+}
+var A, re;
+function ye() {
+  if (re) return A;
+  re = 1;
+  var e = Le(), r = typeof self == "object" && self && self.Object === Object && self, n = e || r || Function("return this")();
+  return A = n, A;
+}
+var k, te;
+function Ae() {
+  if (te) return k;
+  te = 1;
+  var e = ye(), r = function() {
+    return e.Date.now();
+  };
+  return k = r, k;
+}
+var C, ne;
+function ke() {
+  if (ne) return C;
+  ne = 1;
+  var e = /\s/;
+  function r(n) {
+    for (var t = n.length; t-- && e.test(n.charAt(t)); )
+      ;
+    return t;
+  }
+  return C = r, C;
+}
+var z, ie;
+function Ce() {
+  if (ie) return z;
+  ie = 1;
+  var e = ke(), r = /^\s+/;
+  function n(t) {
+    return t && t.slice(0, e(t) + 1).replace(r, "");
+  }
+  return z = n, z;
+}
+var D, oe;
+function Ee() {
+  if (oe) return D;
+  oe = 1;
+  var e = ye(), r = e.Symbol;
+  return D = r, D;
+}
+var G, ae;
+function ze() {
+  if (ae) return G;
+  ae = 1;
+  var e = Ee(), r = Object.prototype, n = r.hasOwnProperty, t = r.toString, i = e ? e.toStringTag : void 0;
+  function a(u) {
+    var s = n.call(u, i), c = u[i];
+    try {
+      u[i] = void 0;
+      var o = !0;
+    } catch {
+    }
+    var f = t.call(u);
+    return o && (s ? u[i] = c : delete u[i]), f;
+  }
+  return G = a, G;
+}
+var M, ue;
+function De() {
+  if (ue) return M;
+  ue = 1;
+  var e = Object.prototype, r = e.toString;
+  function n(t) {
+    return r.call(t);
+  }
+  return M = n, M;
+}
+var B, se;
+function Ge() {
+  if (se) return B;
+  se = 1;
+  var e = Ee(), r = ze(), n = De(), t = "[object Null]", i = "[object Undefined]", a = e ? e.toStringTag : void 0;
+  function u(s) {
+    return s == null ? s === void 0 ? i : t : a && a in Object(s) ? r(s) : n(s);
+  }
+  return B = u, B;
+}
+var F, ce;
+function Me() {
+  if (ce) return F;
+  ce = 1;
+  function e(r) {
+    return r != null && typeof r == "object";
+  }
+  return F = e, F;
+}
+var H, fe;
+function Be() {
+  if (fe) return H;
+  fe = 1;
+  var e = Ge(), r = Me(), n = "[object Symbol]";
+  function t(i) {
+    return typeof i == "symbol" || r(i) && e(i) == n;
+  }
+  return H = t, H;
+}
+var U, le;
+function Fe() {
+  if (le) return U;
+  le = 1;
+  var e = Ce(), r = X(), n = Be(), t = NaN, i = /^[-+]0x[0-9a-f]+$/i, a = /^0b[01]+$/i, u = /^0o[0-7]+$/i, s = parseInt;
+  function c(o) {
+    if (typeof o == "number")
+      return o;
+    if (n(o))
+      return t;
+    if (r(o)) {
+      var f = typeof o.valueOf == "function" ? o.valueOf() : o;
+      o = r(f) ? f + "" : f;
+    }
+    if (typeof o != "string")
+      return o === 0 ? o : +o;
+    o = e(o);
+    var h = a.test(o);
+    return h || u.test(o) ? s(o.slice(2), h ? 2 : 8) : i.test(o) ? t : +o;
+  }
+  return U = c, U;
+}
+var W, de;
+function pe() {
+  if (de) return W;
+  de = 1;
+  var e = X(), r = Ae(), n = Fe(), t = "Expected a function", i = Math.max, a = Math.min;
+  function u(s, c, o) {
+    var f, h, p, T, d, v, S = 0, R = !1, b = !1, _ = !0;
+    if (typeof s != "function")
+      throw new TypeError(t);
+    c = n(c) || 0, e(o) && (R = !!o.leading, b = "maxWait" in o, p = b ? i(n(o.maxWait) || 0, c) : p, _ = "trailing" in o ? !!o.trailing : _);
+    function m(l) {
+      var y = f, j = h;
+      return f = h = void 0, S = l, T = s.apply(j, y), T;
+    }
+    function g(l) {
+      return S = l, d = setTimeout(O, c), R ? m(l) : T;
+    }
+    function P(l) {
+      var y = l - v, j = l - S, K = c - y;
+      return b ? a(K, p - j) : K;
+    }
+    function Y(l) {
+      var y = l - v, j = l - S;
+      return v === void 0 || y >= c || y < 0 || b && j >= p;
+    }
+    function O() {
+      var l = r();
+      if (Y(l))
+        return J(l);
+      d = setTimeout(O, P(l));
+    }
+    function J(l) {
+      return d = void 0, _ && f ? m(l) : (f = h = void 0, T);
+    }
+    function Pe() {
+      d !== void 0 && clearTimeout(d), S = 0, f = v = h = d = void 0;
+    }
+    function Oe() {
+      return d === void 0 ? T : J(r());
+    }
+    function x() {
+      var l = r(), y = Y(l);
+      if (f = arguments, h = this, v = l, y) {
+        if (d === void 0)
+          return g(v);
+        if (b)
+          return clearTimeout(d), d = setTimeout(O, c), m(v);
+      }
+      return d === void 0 && (d = setTimeout(O, c)), T;
+    }
+    return x.cancel = Pe, x.flush = Oe, x;
+  }
+  return W = u, W;
+}
+var He = pe();
+const Ue = /* @__PURE__ */ Se(He);
+var $, be;
+function We() {
+  if (be) return $;
+  be = 1;
+  var e = pe(), r = X(), n = "Expected a function";
+  function t(i, a, u) {
+    var s = !0, c = !0;
+    if (typeof i != "function")
+      throw new TypeError(n);
+    return r(u) && (s = "leading" in u ? !!u.leading : s, c = "trailing" in u ? !!u.trailing : c), e(i, a, {
+      leading: s,
+      maxWait: a,
+      trailing: c
+    });
+  }
+  return $ = t, $;
+}
+var $e = We();
+const Ze = /* @__PURE__ */ Se($e), Xe = (e, r, n, t) => {
+  switch (r) {
+    case "debounce":
+      return Ue(e, n, t);
+    case "throttle":
+      return Ze(e, n, t);
+    default:
+      return e;
+  }
+}, Ye = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e) => {
+    const r = w.useRef(e);
+    return w.useEffect(() => {
+      r.current = e;
+    }), w.useMemo(() => (...n) => {
+      var t;
+      return (t = r.current) === null || t === void 0 ? void 0 : t.call(r, ...n);
+    }, []);
+  }
+), Je = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e) => {
+    const [r, n] = w.useState((e == null ? void 0 : e.current) || null);
+    return e && setTimeout(() => {
+      e.current !== r && n(e.current);
+    }, 0), { refProxy: w.useMemo(() => new Proxy((i) => {
+      i !== r && n(i);
+    }, {
+      get(i, a) {
+        return a === "current" ? r : i[a];
+      },
+      set(i, a, u) {
+        return a === "current" ? n(u) : i[a] = u, !0;
+      }
+    }), [r]), refElement: r, setRefElement: n };
+  }
+), Ke = (e, r) => r === "border-box" ? {
+  width: e.borderBoxSize[0].inlineSize,
+  height: e.borderBoxSize[0].blockSize
+} : r === "content-box" ? {
+  width: e.contentBoxSize[0].inlineSize,
+  height: e.contentBoxSize[0].blockSize
+} : {
+  width: e.contentRect.width,
+  height: e.contentRect.height
+};
+function Qe({ skipOnMount: e = !1, refreshMode: r, refreshRate: n = 1e3, refreshOptions: t, handleWidth: i = !0, handleHeight: a = !0, targetRef: u, observerOptions: s, onResize: c } = {}) {
+  const o = qe(e), f = Ye(c), [h, p] = ve({
+    width: void 0,
+    height: void 0
+  }), { refProxy: T, refElement: d } = Je(u), { box: v } = s || {}, S = Q((b) => {
+    if (!i && !a)
+      return;
+    if (o.current) {
+      o.current = !1;
+      return;
+    }
+    const _ = (m, g) => i && m.width !== g.width || a && m.height !== g.height;
+    b.forEach((m) => {
+      const g = Ke(m, v);
+      p((P) => _(P, g) ? (f == null || f({
+        width: g.width,
+        height: g.height,
+        entry: m
+      }), g) : P);
+    });
+  }, [i, a, o, v]), R = Q(Xe(S, r, n, t), [
+    S,
+    r,
+    n,
+    t
+  ]);
+  return _e(() => {
+    let b;
+    return d ? (b = new window.ResizeObserver(R), b.observe(d, s)) : (h.width || h.height) && (f == null || f({
+      width: null,
+      height: null,
+      entry: null
+    }), p({ width: void 0, height: void 0 })), () => {
+      var _, m, g;
+      (_ = b == null ? void 0 : b.disconnect) === null || _ === void 0 || _.call(b), (g = (m = R).cancel) === null || g === void 0 || g.call(m);
+    };
+  }, [R, d]), Object.assign({ ref: T }, h);
+}
+function Re(e) {
+  var r, n, t = "";
+  if (typeof e == "string" || typeof e == "number") t += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var i = e.length;
+    for (r = 0; r < i; r++) e[r] && (n = Re(e[r])) && (t && (t += " "), t += n);
+  } else for (n in e) e[n] && (t && (t += " "), t += n);
+  return t;
+}
+function Ve() {
+  for (var e, r, n = 0, t = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (r = Re(e)) && (t && (t += " "), t += r);
+  return t;
+}
+const er = "_headerContainer_1cubo_1", rr = "_headerContent_1cubo_34", tr = "_staticEnabled_1cubo_50", Z = {
+  headerContainer: er,
+  headerContent: rr,
+  staticEnabled: tr
+}, nr = 77, q = ({ sticky: e, children: r }) => {
+  const { ref: n, height: t } = Qe({
+    refreshMode: "debounce",
+    refreshRate: 0
+  }), [i, a] = ve(!1), u = () => i ? !e : !0;
+  _e(() => {
+    const c = () => {
+      a(window.scrollY > 0);
+    };
+    return window.addEventListener("scroll", c), () => window.removeEventListener("scroll", c);
+  }, []);
+  const s = `${t || nr}px`;
+  return /* @__PURE__ */ E("div", { style: { minHeight: s }, children: /* @__PURE__ */ E("div", { children: /* @__PURE__ */ Ie(
+    "div",
+    {
+      ref: n,
+      className: Ve(Z.headerContent, {
+        [Z.staticEnabled]: u()
+      }),
+      children: [
+        /* @__PURE__ */ E(q.Header, {}),
+        /* @__PURE__ */ E(q.Tabs, {}),
+        r
+      ]
+    }
+  ) }) });
+};
+q.Header = ({ children: e }) => /* @__PURE__ */ E("div", { className: Z.headerContainer, children: e });
+q.Tabs = ({ children: e }) => /* @__PURE__ */ E("div", { className: "flex justify-between gap-2 nowrap", children: e });
+const je = 0, ir = 9999, or = [150, 151, 250, 251], ar = [152, 153, 252, 253], ur = [154, 155, 157, 158, 254, 255, 258, 354, 355, 358], sr = [156, 159, 160, 256, 259, 260], we = 9998, vr = (e) => e === je, _r = (e) => e === ir, Tr = (e) => or.includes(e), Sr = (e) => ar.includes(e), yr = (e) => ur.includes(e), Er = (e) => sr.includes(e), pr = (e) => e > je && e < we, Rr = (e) => e === we, cr = /\n/, he = (e, r, n) => e.split(r).flatMap((t, i) => i !== 0 ? [xe(n, { key: Math.random().toString(32).slice(0, 10) }), t] : t), fr = (e, r, n) => typeof e == "string" ? he(e, r, n) : e.flatMap((t) => typeof t == "string" ? he(t, r, n) : t), jr = (e) => fr(e, cr, /* @__PURE__ */ E("br", {})), lr = /(\b(https?|):\/\/[-a-zA-Zа-яА-Я0-9+&@#/%?=~_|!:,.;]*[-a-zA-Zа-яА-Я0-9+&@#/%=~_|])/gi, dr = (e) => e.match(lr) ?? [], ge = (e, r, n) => {
+  const t = e.split(r);
+  if (t.length === 1)
+    return e;
+  const i = [];
+  return t[0] !== "" && i.push(t[0]), t.shift(), t[t.length - 1] === "" && t.pop(), i.push(
+    /* @__PURE__ */ E("a", { href: r, target: "_blank", rel: "noreferrer noopener", children: r }, r + n)
+  ), i.push(t.join(r)), i.filter((a) => a !== "");
+}, me = (e) => {
+  const r = dr(e);
+  return r != null && r.length ? r.reduce((n, t, i) => typeof n == "string" ? ge(n, t, i) : n.flatMap((a) => typeof a == "string" ? ge(a, t, i) : a), e) : e;
+}, wr = (e) => typeof e == "string" ? me(e) : e.flatMap((r) => typeof r == "string" ? me(r) : r, e), Pr = (e, r = "PP") => Te(e, r), Or = (e, r, n = "PP") => Te(Ne(e, r), n);
 export {
-  n as NavigationPanel
+  we as ENTERPRISE_OPENSOURCE_PLAN_ID,
+  sr as ENTERPRISE_PLAN_IDS,
+  ar as ESSENTIAL_PLAN_IDS,
+  je as FREE_PLAN_ID,
+  q as NavigationPanel,
+  ur as PRO_PLAN_IDS,
+  or as START_PLAN_IDS,
+  ir as TRIAL_PLAN_ID,
+  jr as convertNewLineToBreakTag,
+  Pr as formatDate,
+  Or as formatDateTz,
+  Rr as isEnterpriseOpenSourcePlan,
+  Er as isEnterprisePlan,
+  Sr as isEssentialPlan,
+  vr as isFreePlan,
+  pr as isPaidPlan,
+  yr as isProPlan,
+  Tr as isStartPlan,
+  _r as isTrialPlan,
+  wr as makeUrlClickable
 };

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export { NavigationPanel } from './components/NavigationPanel/NavigationPanel';
+export * from './src/node'
+export {}

package/dist/types/src/components/NavigationPanel/NavigationPanel.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+type NavigationPanelProps = {
+    sticky?: boolean;
+} & PropsWithChildren;
+export declare const NavigationPanel: {
+    ({ sticky, children }: NavigationPanelProps): import("react/jsx-runtime").JSX.Element;
+    Header({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Tabs({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/types/src/components/NavigationPanel/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+type Item = {
+    name: string;
+    link: string;
+};
+type BreadcrumbsProps = {
+    items: Item[];
+};
+export declare const Breadcrumbs: ({ items }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/NavigationPanel/components/Breadcrumbs/Breadcrumbs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/NavigationPanel/components/DropdownContent/DropdownContent.d.ts

@@ -0,0 +1,4 @@
+import { DropdownItem } from '../../types/navigation';
+export declare const DropdownContent: ({ items }: {
+    items: DropdownItem[][];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/NavigationPanel/components/DropdownContent/DropdownContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/NavigationPanel/components/NavigationTabs/NavigationTabs.d.ts

@@ -0,0 +1,7 @@
+import { NavigationTabsItem as NavigationTabsItemTypes } from '../../types/navigation';
+type NavigationTabsProps = {
+    navigation: NavigationTabsItemTypes[];
+    activeItem: string;
+};
+export declare const NavigationTabs: ({ navigation, activeItem }: NavigationTabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/NavigationPanel/components/NavigationTabs/NavigationTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavItemContents.d.ts

@@ -0,0 +1,7 @@
+interface NavItemContentProps {
+    label: string;
+    badge?: number;
+    novel?: string;
+}
+export declare const NavItemContents: ({ label, badge, novel }: NavItemContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavigationTabsItem.d.ts

@@ -0,0 +1,11 @@
+type NavigationTabsItemProps = {
+    label: string;
+    badge?: number;
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    href?: string;
+    novel?: string;
+};
+export declare const NavigationTabsItem: import('react').ForwardRefExoticComponent<NavigationTabsItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/src/components/NavigationPanel/components/NavigationTabs/NavigationTabsItem/NavigationTabsItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/NavigationPanel/components/NavigationTabs/__fixtures__/navigationMock.d.ts

@@ -0,0 +1,2 @@
+import { NavigationTabsItem } from '../../../types/navigation';
+export declare const navigation: NavigationTabsItem[];

package/dist/types/src/components/NavigationPanel/components/NavigationTabs/helpers.d.ts

@@ -0,0 +1,2 @@
+import { NavigationTabsItem } from '../../types/navigation';
+export declare const isNavigationItemVisible: (item: NavigationTabsItem) => boolean;

package/dist/types/src/components/NavigationPanel/stories/NavigationPanel.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NavigationPanel } from '../NavigationPanel';
+declare const meta: Meta<typeof NavigationPanel>;
+export default meta;
+type Story = StoryObj<typeof NavigationPanel>;
+export declare const Default: Story;

package/dist/types/src/components/NavigationPanel/types/navigation.d.ts

@@ -0,0 +1,21 @@
+export type NavIsActiveFunction = (input: string) => boolean;
+export type NavItemIcon = 'tasks' | 'contributors' | 'download' | 'more' | 'files';
+export type NavigationTabsItem = {
+    key: string;
+    label: string;
+    visible: boolean;
+    isActive?: NavIsActiveFunction;
+    disabled?: boolean;
+    badge?: number;
+    link?: string;
+    onClick?: () => void;
+    dropdown?: DropdownItem[][];
+    novel?: string;
+    icon?: NavItemIcon;
+};
+export type DropdownItem = {
+    label: string;
+    visible?: boolean;
+    link?: string;
+    onClick?: () => void;
+};

package/dist/types/src/node.d.ts

@@ -0,0 +1,11 @@
+/**
+ * COMPONENTS EXPORTS
+ */
+export { NavigationPanel } from './components/NavigationPanel/NavigationPanel';
+/**
+ * UTILITIES EXPORTS
+ */
+export { isPaidPlan, isProPlan, isEnterpriseOpenSourcePlan, isEnterprisePlan, isEssentialPlan, isStartPlan, isFreePlan, isTrialPlan, ENTERPRISE_PLAN_IDS, START_PLAN_IDS, ESSENTIAL_PLAN_IDS, PRO_PLAN_IDS, FREE_PLAN_ID, TRIAL_PLAN_ID, ENTERPRISE_OPENSOURCE_PLAN_ID, } from './utils/billing/plan/plan';
+export { convertNewLineToBreakTag } from './utils/content/text/text';
+export { makeUrlClickable } from './utils/content/url/url';
+export { formatDate, formatDateTz } from './utils/i18n/date/date';

package/dist/types/src/utils/billing/plan/plan.d.ts

@@ -0,0 +1,15 @@
+export declare const FREE_PLAN_ID = 0;
+export declare const TRIAL_PLAN_ID = 9999;
+export declare const START_PLAN_IDS: number[];
+export declare const ESSENTIAL_PLAN_IDS: number[];
+export declare const PRO_PLAN_IDS: number[];
+export declare const ENTERPRISE_PLAN_IDS: number[];
+export declare const ENTERPRISE_OPENSOURCE_PLAN_ID = 9998;
+export declare const isFreePlan: (planId: number) => planId is 0;
+export declare const isTrialPlan: (planId: number) => planId is 9999;
+export declare const isStartPlan: (planId: number) => boolean;
+export declare const isEssentialPlan: (planId: number) => boolean;
+export declare const isProPlan: (planId: number) => boolean;
+export declare const isEnterprisePlan: (planId: number) => boolean;
+export declare const isPaidPlan: (planId: number) => boolean;
+export declare const isEnterpriseOpenSourcePlan: (planId: number) => planId is 9998;

package/dist/types/src/utils/billing/plan/plan.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/content/text/text.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement, ReactNode } from 'react';
+export declare const replaceStringWithElement: (input: string | readonly ReactNode[], search: RegExp, replace: ReactElement) => readonly ReactNode[];
+export declare const convertNewLineToBreakTag: (text: string | ReactNode[]) => readonly ReactNode[];

package/dist/types/src/utils/content/text/text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/content/url/url.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+export declare const matchUrl: (input: string) => readonly string[];
+export declare const makeUrlClickable: (text: string | ReactNode[]) => string | ReactNode[];

package/dist/types/src/utils/content/url/url.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/i18n/date/date.d.ts

@@ -0,0 +1,3 @@
+export type DateFormat = 'PP' | 'PP H:mm:ss' | 'PPpp' | 'LLLL y' | 'LLLL do' | 'dd-MM-yyyy' | 'MMM dd, yyyy HH:mm' | 'yyyy-MM-dd' | 'yyyy-MM-dd H:mm:ss';
+export declare const formatDate: (date: Date, format?: DateFormat) => string;
+export declare const formatDateTz: (date: Date, timezone: string, format?: DateFormat) => string;

package/dist/types/src/utils/i18n/date/date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/utils.d.ts

@@ -0,0 +1,7 @@
+import { RenderOptions } from '@testing-library/react';
+import { ReactElement } from 'react';
+interface ExtendedRenderOptions extends RenderOptions {
+    theme?: 'light' | 'dark';
+}
+export declare const renderWithProviders: (ui: ReactElement, { theme, ...options }?: ExtendedRenderOptions) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lokalise/harmony",
-    "version": "1.1.0",
+    "version": "1.3.0",
     "author": {
         "name": "Lokalise",
         "url": "https://lokalise.com/"
@@ -31,43 +31,46 @@
     },
     "peerDependencies": {
         "@lokalise/louis": ">=26.0.0",
+        "@lokalise/styled": ">=3.0.0",
         "@lokalise/token-dictionary": ">=2.42.1",
+        "date-fns": ">=4.1",
+        "date-fns-tz": ">=3.2",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0"
     },
     "devDependencies": {
         "@biomejs/biome": "^1.9.4",
         "@chromatic-com/storybook": "^3.2.4",
-        "@lokalise/biome-config": "^1.5.0",
-        "@lokalise/styled": "^3.0.0",
+        "@lokalise/biome-config": "^1.6.1",
         "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/commit-analyzer": "^13.0.1",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/github": "^11.0.1",
         "@semantic-release/npm": "^12.0.1",
         "@semantic-release/release-notes-generator": "^14.0.3",
-        "@storybook/addon-essentials": "^8.6.0-alpha.1",
-        "@storybook/addon-interactions": "^8.6.0-alpha.1",
-        "@storybook/addon-onboarding": "^8.6.0-alpha.1",
+        "@storybook/addon-essentials": "^8.6.0-alpha.4",
+        "@storybook/addon-interactions": "^8.6.0-alpha.4",
+        "@storybook/addon-onboarding": "^8.6.0-alpha.4",
         "@storybook/blocks": "^8.6.0-alpha.1",
-        "@storybook/react": "^8.6.0-alpha.1",
-        "@storybook/react-vite": "^8.6.0-alpha.1",
+        "@storybook/react": "^8.6.0-alpha.4",
+        "@storybook/react-vite": "^8.6.0-alpha.4",
         "@storybook/test": "^8.6.0-alpha.1",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.2.0",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^22.10.10",
+        "@types/node": "^22.13.1",
         "@types/react": "^18.3.18",
         "@types/react-dom": "18.3.0",
-        "@typescript-eslint/parser": "^8.21.0",
+        "@typescript-eslint/parser": "^8.23.0",
         "@vitejs/plugin-react": "^4.3.4",
-        "@vitest/coverage-v8": "^3.0.4",
-        "bundlesize2": "^0.0.32",
+        "@vitest/coverage-v8": "^3.0.5",
+        "bundlesize2": "^0.0.34",
         "conventional-changelog-conventionalcommits": "^8.0.0",
         "eslint-plugin-i18next": "^6.0.9",
         "eslint-plugin-storybook": "^0.11.2",
         "eslint-plugin-testing-library": "^7.1.1",
         "jsdom": "26.0.0",
+        "rimraf": "^6.0.1",
         "semantic-release": "^24.2.1",
         "storybook": "^8.6.0-alpha.1",
         "typescript": "^5.7.3",
@@ -85,5 +88,9 @@
             "require": "./dist/harmony.cjs",
             "import": "./dist/harmony.mjs"
         }
+    },
+    "dependencies": {
+        "clsx": "^2.1.1",
+        "react-resize-detector": "^11.0.1"
     }
 }

package/dist/types/components/NavigationPanel/NavigationPanel.d.ts

@@ -1 +0,0 @@
-export declare const NavigationPanel: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/NavigationPanel/NavigationPanel.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Basic: Story;