@semcore/skeleton 16.0.0-prerelease.2 → 16.0.0-prerelease.20

package/lib/esm/Skeleton.mjs

@@ -1,152 +1,179 @@
-import z from "@babel/runtime/helpers/esm/toConsumableArray";
-import M from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import y from "@babel/runtime/helpers/esm/assertThisInitialized";
-import g from "@babel/runtime/helpers/esm/objectSpread2";
-import b from "@babel/runtime/helpers/esm/classCallCheck";
-import x from "@babel/runtime/helpers/esm/createClass";
-import R from "@babel/runtime/helpers/esm/inherits";
-import P from "@babel/runtime/helpers/esm/createSuper";
-import _ from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent as C, sstyled as p, assignProps as E, Component as w } from "@semcore/core";
-import s from "react";
-import { Box as $ } from "@semcore/flex-box";
-import D from "@semcore/core/lib/utils/uniqueID";
-import I from "@semcore/core/lib/utils/canUseDOM";
-import O from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { localizedMessages as U } from "./translations/__intergalactic-dynamic-locales.mjs";
-var N = ["y", "x", "amount", "width", "styles", "forwardRef"], A = (
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+var _excluded = ["y", "x", "amount", "width", "styles", "forwardRef"];
+/*!__reshadow-styles__:"./style/skeleton.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (p.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     "@keyframes pulse_1aad7{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1aad7_gg_{animation-name:pulse_1aad7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1aad7);will-change:opacity}.___SSkeletonSVG_1aad7_gg_._theme_invert_1aad7_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_1aad7_gg_._theme_dark_1aad7_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1aad7_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1aad7_gg_{animation-name:none}}",
+    /*__inner_css_end__*/
     "1aad7_gg_"
-  ), {
-    __SSkeleton: "___SSkeleton_1aad7_gg_",
+  ), /*__reshadow_css_end__*/
+  {
+    "__SSkeleton": "___SSkeleton_1aad7_gg_",
     "--durationAnim": "--durationAnim_1aad7",
     "@pulse": "pulse_1aad7",
-    __SSkeletonSVG: "___SSkeletonSVG_1aad7_gg_",
-    _theme_invert: "_theme_invert_1aad7_gg_",
-    _theme_dark: "_theme_dark_1aad7_gg_",
-    __SText: "___SText_1aad7_gg_"
+    "__SSkeletonSVG": "___SSkeletonSVG_1aad7_gg_",
+    "_theme_invert": "_theme_invert_1aad7_gg_",
+    "_theme_dark": "_theme_dark_1aad7_gg_",
+    "__SText": "___SText_1aad7_gg_"
   })
-), W = {
+);
+var MAP_COLOR_THEME = {
   dark: "rgba(255, 255, 255, 0.3)",
   invert: "rgba(224, 225, 233, 0.8)"
-}, v = /* @__PURE__ */ function(a) {
-  R(r, a);
-  var m = P(r);
-  function r() {
-    return b(this, r), m.apply(this, arguments);
+};
+var SkeletonRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(SkeletonRoot2, _Component);
+  var _super = _createSuper(SkeletonRoot2);
+  function SkeletonRoot2() {
+    _classCallCheck(this, SkeletonRoot2);
+    return _super.apply(this, arguments);
   }
-  return x(r, [{
+  _createClass(SkeletonRoot2, [{
     key: "render",
-    value: function() {
-      var e = this.asProps, t, n = $, i = this.asProps;
-      i.Children;
-      var l = i.styles, d = i.duration, u = i.hidden, c = i.getI18nText;
-      return i.tag, u ? null : (t = p(l), /* @__PURE__ */ s.createElement(n, t.cn("SSkeleton", g({}, E({
-        durationAnim: "".concat(d, "ms"),
-        role: "img",
-        "aria-label": c("loading")
-      }, e)))));
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var SSkeleton = Box;
+      var _this$asProps = this.asProps;
+      _this$asProps.Children;
+      var styles = _this$asProps.styles, duration = _this$asProps.duration, hidden = _this$asProps.hidden, getI18nText = _this$asProps.getI18nText;
+      _this$asProps.tag;
+      if (hidden) return null;
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeleton, _ref3.cn("SSkeleton", _objectSpread({}, assignProps({
+        "durationAnim": "".concat(duration, "ms"),
+        "role": "img",
+        "aria-label": getI18nText("loading")
+      }, _ref))));
     }
-  }]), r;
-}(w);
-_(v, "displayName", "Skeleton");
-_(v, "style", A);
-_(v, "enhance", [O(U)]);
-_(v, "defaultProps", {
+  }]);
+  return SkeletonRoot2;
+}(Component);
+_defineProperty(SkeletonRoot, "displayName", "Skeleton");
+_defineProperty(SkeletonRoot, "style", style);
+_defineProperty(SkeletonRoot, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(SkeletonRoot, "defaultProps", {
   width: "100%",
   height: "100%",
   duration: 2e3
 });
-var h = /* @__PURE__ */ function(a) {
-  R(r, a);
-  var m = P(r);
-  function r(o) {
-    var e;
-    return b(this, r), e = m.call(this, o), _(y(e), "svgRef", /* @__PURE__ */ s.createRef()), I() && o.observeParentSize && (e.observer = new ResizeObserver(e.handleResize.bind(y(e)))), e;
+var SkeletonSVG = /* @__PURE__ */ function(_Component2) {
+  _inherits(SkeletonSVG2, _Component2);
+  var _super2 = _createSuper(SkeletonSVG2);
+  function SkeletonSVG2(props) {
+    var _this;
+    _classCallCheck(this, SkeletonSVG2);
+    _this = _super2.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "svgRef", /* @__PURE__ */ React.createRef());
+    if (canUseDOM() && props.observeParentSize) {
+      _this.observer = new ResizeObserver(_this.handleResize.bind(_assertThisInitialized(_this)));
+    }
+    return _this;
   }
-  return x(r, [{
+  _createClass(SkeletonSVG2, [{
     key: "componentDidMount",
-    value: function() {
-      var e, t;
-      (e = this.observer) === null || e === void 0 || e.observe((t = this.svgRef.current) === null || t === void 0 ? void 0 : t.parentElement);
+    value: function componentDidMount() {
+      var _this$observer, _this$svgRef$current;
+      (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.observe((_this$svgRef$current = this.svgRef.current) === null || _this$svgRef$current === void 0 ? void 0 : _this$svgRef$current.parentElement);
     }
   }, {
     key: "componentWillUnmount",
-    value: function() {
-      var e;
-      (e = this.observer) === null || e === void 0 || e.disconnect();
+    value: function componentWillUnmount() {
+      var _this$observer2;
+      (_this$observer2 = this.observer) === null || _this$observer2 === void 0 ? void 0 : _this$observer2.disconnect();
     }
   }, {
     key: "handleResize",
-    value: function(e) {
-      var t = e[0].target, n = this.svgRef.current;
-      t && n && n.setAttribute("width", "100%");
+    value: function handleResize(data) {
+      var target = data[0].target;
+      var svg = this.svgRef.current;
+      if (target && svg) {
+        svg.setAttribute("width", "100%");
+      }
     }
   }, {
     key: "setContext",
-    value: function() {
-      var e = this.asProps.theme;
+    value: function setContext() {
+      var theme = this.asProps.theme;
       return {
-        gradientUrl: W[e]
+        gradientUrl: MAP_COLOR_THEME[theme]
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var e = this.asProps, t, n = this.asProps, i = n.Children, l = n.styles, d = n.uid, u = n.theme, c = n.duration, S = L;
-      return t = p(l), /* @__PURE__ */ s.createElement(S, t.cn("SSkeletonSVG", g({}, E({
-        tag: "svg",
-        ref: this.svgRef,
-        preserveAspectRatio: "none",
-        theme: u,
-        durationAnim: "".concat(c, "ms")
-      }, e))), /* @__PURE__ */ s.createElement("defs", t.cn("defs", {}), /* @__PURE__ */ s.createElement("mask", t.cn("mask", {
-        id: d
-      }), /* @__PURE__ */ s.createElement(i, t.cn("Children", {})))), /* @__PURE__ */ s.createElement("rect", t.cn("rect", {
-        x: "0",
-        y: "0",
-        width: "100%",
-        height: "100%",
-        mask: "url(#".concat(d, ")")
+    value: function render() {
+      var _ref2 = this.asProps, _ref4;
+      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, uid = _this$asProps2.uid, theme = _this$asProps2.theme, duration = _this$asProps2.duration;
+      var SSkeletonSVG = Skeleton;
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeletonSVG, _ref4.cn("SSkeletonSVG", _objectSpread({}, assignProps({
+        "tag": "svg",
+        "ref": this.svgRef,
+        "preserveAspectRatio": "none",
+        "theme": theme,
+        "durationAnim": "".concat(duration, "ms")
+      }, _ref2))), /* @__PURE__ */ React.createElement("defs", _ref4.cn("defs", {}), /* @__PURE__ */ React.createElement("mask", _ref4.cn("mask", {
+        "id": uid
+      }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})))), /* @__PURE__ */ React.createElement("rect", _ref4.cn("rect", {
+        "x": "0",
+        "y": "0",
+        "width": "100%",
+        "height": "100%",
+        "mask": "url(#".concat(uid, ")")
       })));
     }
-  }]), r;
-}(w);
-_(h, "displayName", "SkeletonSVG");
-_(h, "enhance", [D()]);
-_(h, "style", A);
-_(h, "defaultProps", {
+  }]);
+  return SkeletonSVG2;
+}(Component);
+_defineProperty(SkeletonSVG, "displayName", "SkeletonSVG");
+_defineProperty(SkeletonSVG, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(SkeletonSVG, "style", style);
+_defineProperty(SkeletonSVG, "defaultProps", {
   theme: "invert",
   duration: 2e3
 });
-function j(a) {
-  var m = $, r = a.y, o = r === void 0 ? 0 : r, e = a.x, t = e === void 0 ? 0 : e, n = a.amount, i = n === void 0 ? 1 : n, l = a.width, d = l === void 0 ? "100%" : l, u = a.styles, c = a.forwardRef, S = M(a, N), T = Number(i), G = function(f) {
-    var k;
-    return k = p(u), /* @__PURE__ */ s.createElement(m, k.cn("SText", g({
-      tag: "rect",
-      rx: "4",
-      ry: "4",
-      height: "8"
-    }, f)));
+function Text(props) {
+  var SText = Box;
+  var _props$y = props.y, y = _props$y === void 0 ? 0 : _props$y, _props$x = props.x, x = _props$x === void 0 ? 0 : _props$x, _props$amount = props.amount, amount = _props$amount === void 0 ? 1 : _props$amount, _props$width = props.width, width = _props$width === void 0 ? "100%" : _props$width, styles = props.styles, forwardRef = props.forwardRef, other = _objectWithoutProperties(props, _excluded);
+  var amountLine = Number(amount);
+  var renderRect = function renderRect2(props2) {
+    var _ref5;
+    return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", _objectSpread({
+      "tag": "rect",
+      "rx": "4",
+      "ry": "4",
+      "height": "8"
+    }, props2)));
   };
-  return /* @__PURE__ */ s.createElement(s.Fragment, null, z(Array(T)).map(function(V, f) {
-    return G(g({
-      key: f,
-      y: o || 20 * f,
-      x: t,
-      ref: c,
-      width: d
-    }, S));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, _toConsumableArray(Array(amountLine)).map(function(el, index) {
+    return renderRect(_objectSpread({
+      key: index,
+      y: y || 20 * index,
+      x,
+      ref: forwardRef,
+      width
+    }, other));
   }));
 }
-var L = C(v);
-const ie = C(h, {
-  Text: j
+var Skeleton = createComponent(SkeletonRoot);
+const Skeleton$1 = createComponent(SkeletonSVG, {
+  Text
 });
 export {
-  L as Skeleton,
-  ie as default
+  Skeleton,
+  Skeleton$1 as default
 };

package/lib/esm/index.mjs

@@ -1,24 +1,24 @@
-import { default as a } from "./Skeleton.mjs";
-import { default as o } from "./Charts/Histogram.mjs";
-import { default as f } from "./Charts/Donut.mjs";
-import { default as m } from "./Charts/Bar.mjs";
-import { default as d } from "./Charts/CompactHorizontalBar.mjs";
-import { default as s } from "./Charts/Area.mjs";
-import { default as C } from "./Charts/Line.mjs";
-import { default as h } from "./Charts/Venn.mjs";
-import { default as i } from "./Charts/ScatterPlot.mjs";
-import { default as b } from "./Charts/Bubble.mjs";
-import { default as H } from "./Charts/RadialTree.mjs";
+import { default as default2 } from "./Skeleton.mjs";
+import { default as default3 } from "./Charts/Histogram.mjs";
+import { default as default4 } from "./Charts/Donut.mjs";
+import { default as default5 } from "./Charts/Bar.mjs";
+import { default as default6 } from "./Charts/CompactHorizontalBar.mjs";
+import { default as default7 } from "./Charts/Area.mjs";
+import { default as default8 } from "./Charts/Line.mjs";
+import { default as default9 } from "./Charts/Venn.mjs";
+import { default as default10 } from "./Charts/ScatterPlot.mjs";
+import { default as default11 } from "./Charts/Bubble.mjs";
+import { default as default12 } from "./Charts/RadialTree.mjs";
 export {
-  s as AreaChartSkeleton,
-  m as BarChartSkeleton,
-  b as BubbleChartSkeleton,
-  d as CompactHorizontalBarChartSkeleton,
-  f as DonutChartSkeleton,
-  o as HistogramChartSkeleton,
-  C as LineChartSkeleton,
-  H as RadialTreeChartSkeleton,
-  i as ScatterPlotChartSkeleton,
-  h as VennChartSkeleton,
-  a as default
+  default7 as AreaChartSkeleton,
+  default5 as BarChartSkeleton,
+  default11 as BubbleChartSkeleton,
+  default6 as CompactHorizontalBarChartSkeleton,
+  default4 as DonutChartSkeleton,
+  default3 as HistogramChartSkeleton,
+  default8 as LineChartSkeleton,
+  default12 as RadialTreeChartSkeleton,
+  default10 as ScatterPlotChartSkeleton,
+  default9 as VennChartSkeleton,
+  default2 as default
 };

package/lib/esm/style/chart.shadow.css

@@ -0,0 +1,17 @@
+SChartSkeleton {
+  height: 200px;
+  width: 100%;
+  background-image: var(--bgPattern);
+}
+
+SChartSkeleton[bgPosition] {
+  background-position: var(--bgPosition);
+}
+
+SChartSkeleton[bgSize] {
+  background-size: var(--bgSize);
+}
+
+SChartSkeleton[bgRepeat] {
+  background-repeat: var(--bgRepeat);
+}

package/lib/esm/style/skeleton.shadow.css

@@ -0,0 +1,39 @@
+SSkeleton {
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  animation-duration: var(--durationAnim);
+  will-change: opacity;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+SSkeletonSVG[theme='invert'] {
+  fill: var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8));
+}
+
+SSkeletonSVG[theme='dark'] {
+  fill: var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3));
+}
+
+SText {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion) {
+  SSkeleton {
+    animation-name: none;
+  }
+}

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/lib/esm/translations/de.json.mjs

@@ -1,7 +1,8 @@
-const d = "Wird geladen …", a = {
-  loading: d
+const loading = "Wird geladen …";
+const de = {
+  loading
 };
 export {
-  a as default,
-  d as loading
+  de as default,
+  loading
 };

package/lib/esm/translations/en.json.mjs

@@ -1,7 +1,8 @@
-const n = "Loading…", o = {
-  loading: n
+const loading = "Loading…";
+const en = {
+  loading
 };
 export {
-  o as default,
-  n as loading
+  en as default,
+  loading
 };

package/lib/esm/translations/es.json.mjs

@@ -1,7 +1,8 @@
-const a = "Cargando", o = {
-  loading: a
+const loading = "Cargando";
+const es = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  es as default,
+  loading
 };

package/lib/esm/translations/fr.json.mjs

@@ -1,7 +1,8 @@
-const n = "Chargement en cours", o = {
-  loading: n
+const loading = "Chargement en cours";
+const fr = {
+  loading
 };
 export {
-  o as default,
-  n as loading
+  fr as default,
+  loading
 };

package/lib/esm/translations/it.json.mjs

@@ -1,7 +1,8 @@
-const a = "Caricamento", o = {
-  loading: a
+const loading = "Caricamento";
+const it = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  it as default,
+  loading
 };

package/lib/esm/translations/ja.json.mjs

@@ -1,7 +1,8 @@
-const a = "読み込み中", o = {
-  loading: a
+const loading = "読み込み中";
+const ja = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  ja as default,
+  loading
 };

package/lib/esm/translations/ko.json.mjs

@@ -1,7 +1,8 @@
-const o = "로딩 중", a = {
-  loading: o
+const loading = "로딩 중";
+const ko = {
+  loading
 };
 export {
-  a as default,
-  o as loading
+  ko as default,
+  loading
 };

package/lib/esm/translations/nl.json.mjs

@@ -1,7 +1,8 @@
-const n = "Bezig met laden...", a = {
-  loading: n
+const loading = "Bezig met laden...";
+const nl = {
+  loading
 };
 export {
-  a as default,
-  n as loading
+  nl as default,
+  loading
 };

package/lib/esm/translations/pl.json.mjs

@@ -1,7 +1,8 @@
-const a = "Ładowanie…", o = {
-  loading: a
+const loading = "Ładowanie…";
+const pl = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  pl as default,
+  loading
 };

package/lib/esm/translations/pt.json.mjs

@@ -1,7 +1,8 @@
-const a = "Carregando", o = {
-  loading: a
+const loading = "Carregando";
+const pt = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  pt as default,
+  loading
 };

package/lib/esm/translations/sv.json.mjs

@@ -1,7 +1,8 @@
-const a = "Laddar…", d = {
-  loading: a
+const loading = "Laddar…";
+const sv = {
+  loading
 };
 export {
-  d as default,
-  a as loading
+  sv as default,
+  loading
 };

package/lib/esm/translations/tr.json.mjs

@@ -1,7 +1,8 @@
-const o = "Yükleniyor", n = {
-  loading: o
+const loading = "Yükleniyor";
+const tr = {
+  loading
 };
 export {
-  n as default,
-  o as loading
+  tr as default,
+  loading
 };

package/lib/esm/translations/vi.json.mjs

@@ -1,7 +1,8 @@
-const a = "Đang tải…", n = {
-  loading: a
+const loading = "Đang tải…";
+const vi = {
+  loading
 };
 export {
-  n as default,
-  a as loading
+  vi as default,
+  loading
 };