@janiscommerce/ui-web 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -7,11 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-<<<<<<< HEAD
+## [0.31.0] - 2025-03-14
+
+### Added
+
+- Full loader component
+- Spinner loader component
+
 ## [0.30.0] - 2025-03-06
-=======
-## [0.30.0] - 2025-02-26
->>>>>>> 91ba7c2d8e55838f6f56bc165ea011472e05dc62
 
 ### Added
 

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef, PureComponent, useMemo, useCallback, useLayoutEffect, createContext } from 'react';
-import styled$g, { css } from 'styled-components';
+import styled$g, { css, keyframes } from 'styled-components';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
@@ -5621,7 +5621,7 @@ $$7({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES }, {
 });
 
 var _templateObject$4;
-var styles = {
+var styles$2 = {
   Svg: styled$g.svg.withConfig({
     displayName: "styles__Svg",
     componentId: "sc-jf3e5i-0"
@@ -5645,7 +5645,7 @@ var styles = {
   Item: styled$g.div.withConfig({
     displayName: "styles__Item",
     componentId: "sc-jf3e5i-3"
-  })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), palette.blue, styles.Svg, palette.blue),
+  })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles$2.Svg, mixins.transition('fill'), palette.blue, styles$2.Svg, palette.blue),
   SearchInput: styled$g.input.withConfig({
     displayName: "styles__SearchInput",
     componentId: "sc-jf3e5i-4"
@@ -7072,7 +7072,7 @@ var Icon = function Icon(_ref) {
   var color = _ref.color,
       name = _ref.name,
       sizeProp = _ref.size,
-      styles$1 = _ref.styles,
+      styles = _ref.styles,
       pathStyles = _ref.pathStyles,
       width = _ref.width,
       height = _ref.height,
@@ -7085,14 +7085,14 @@ var Icon = function Icon(_ref) {
       defaultSize = _icons$name.size;
   var size = sizeProp || defaultSize;
   if (!path) return null;
-  return /*#__PURE__*/React__default.createElement(styles.Svg, _extends$1({
+  return /*#__PURE__*/React__default.createElement(styles$2.Svg, _extends$1({
     width: width || size,
     height: height || size,
-    styles: styles$1,
+    styles: styles,
     color: color,
     viewBox: viewBox,
     size: size
-  }, props), /*#__PURE__*/React__default.createElement(styles.Path, {
+  }, props), /*#__PURE__*/React__default.createElement(styles$2.Path, {
     d: path,
     styles: pathStyles
   }));
@@ -35492,5 +35492,104 @@ var Map$1 = function Map(_ref) {
   }));
 };
 
-export { Avatar, AvatarGroup$1 as AvatarGroup, Button, Checkbox, Chip, ClickAwayListener, Color, ColorPicker, Drawer, ErrorBoundary, HTML, Icon, Image, Input, Link, Map$1 as Map, QRCode, Skeleton, Switch, Textarea, icons, palette };
+var rotate = keyframes(["to{transform:rotate(360deg);}"]);
+var Spinner$1 = styled$g.div.withConfig({
+  displayName: "styles__Spinner",
+  componentId: "sc-1e490ps-0"
+})(["", ""], function (_ref) {
+  var color = _ref.color,
+      duration = _ref.duration,
+      size = _ref.size,
+      thickness = _ref.thickness,
+      backSpinnerColor = _ref.backSpinnerColor;
+  return css(["width:", "px;height:", "px;border-radius:50%;background-color:transparent;border-top:", "px solid ", ";border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";animation:", " ", "s linear infinite;position:absolute;"], size, size, thickness, getColor(color), thickness, getColor(color), thickness, getColor(color), thickness, getColor(backSpinnerColor), rotate, duration);
+});
+var SpinnerWrapper = styled$g.div.withConfig({
+  displayName: "styles__SpinnerWrapper",
+  componentId: "sc-1e490ps-1"
+})(["position:relative;display:flex;justify-content:center;align-items:center;width:", "px;height:", "px;"], function (_ref2) {
+  var size = _ref2.size;
+  return size;
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size;
+});
+var CenterContent = styled$g.div.withConfig({
+  displayName: "styles__CenterContent",
+  componentId: "sc-1e490ps-2"
+})(["position:absolute;display:flex;justify-content:center;align-items:center;"]);
+var styles$1 = {
+  Spinner: Spinner$1,
+  CenterContent: CenterContent,
+  SpinnerWrapper: SpinnerWrapper
+};
+
+var Spinner = function Spinner(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      children = _ref.children;
+  var _config$color = config.color,
+      color = _config$color === void 0 ? 'blue' : _config$color,
+      _config$duration = config.duration,
+      duration = _config$duration === void 0 ? 4 : _config$duration,
+      _config$size = config.size,
+      size = _config$size === void 0 ? 115 : _config$size,
+      _config$thickness = config.thickness,
+      thickness = _config$thickness === void 0 ? 8 : _config$thickness,
+      _config$backSpinnerCo = config.backSpinnerColor,
+      backSpinnerColor = _config$backSpinnerCo === void 0 ? 'grey' : _config$backSpinnerCo;
+  return /*#__PURE__*/React__default.createElement(styles$1.SpinnerWrapper, {
+    size: size
+  }, /*#__PURE__*/React__default.createElement(styles$1.Spinner, {
+    color: color,
+    duration: duration,
+    size: size,
+    thickness: thickness,
+    backSpinnerColor: backSpinnerColor
+  }), children && /*#__PURE__*/React__default.createElement(styles$1.CenterContent, null, children));
+};
+
+var show = keyframes(["0%{opacity:0;}to{opacity:1;}"]);
+var Container = styled$g.section.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-19kt9g-0"
+})(["display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;background:", ";", ";z-index:100;animation:", " 0.2s ease-in;"], function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor;
+}, function (_ref2) {
+  var effect = _ref2.effect;
+  return effect && css(effect);
+}, show);
+var LoaderContainer = styled$g.div.withConfig({
+  displayName: "styles__LoaderContainer",
+  componentId: "sc-19kt9g-1"
+})(["position:relative;display:flex;justify-content:center;align-items:center;width:115px;height:115px;"]);
+var styles = {
+  Container: Container,
+  LoaderContainer: LoaderContainer
+};
+
+var FullLoader = function FullLoader(_ref) {
+  var children = _ref.children,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
+      _ref$spinnerConfig = _ref.spinnerConfig,
+      spinnerConfig = _ref$spinnerConfig === void 0 ? {} : _ref$spinnerConfig,
+      _ref$effect = _ref.effect,
+      effect = _ref$effect === void 0 ? {} : _ref$effect;
+  var defaultSpinnerConfig = {
+    color: 'blue',
+    duration: 4,
+    size: 115,
+    thickness: 8
+  };
+  return /*#__PURE__*/React__default.createElement(styles.Container, {
+    effect: effect,
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React__default.createElement(styles.LoaderContainer, null, children || /*#__PURE__*/React__default.createElement(Spinner, {
+    config: _objectSpread2(_objectSpread2({}, defaultSpinnerConfig), spinnerConfig)
+  })));
+};
+
+export { Avatar, AvatarGroup$1 as AvatarGroup, Button, Checkbox, Chip, ClickAwayListener, Color, ColorPicker, Drawer, ErrorBoundary, FullLoader, HTML, Icon, Image, Input, Link, Map$1 as Map, QRCode, Skeleton, Spinner, Switch, Textarea, icons, palette };
 //# sourceMappingURL=index.esm.js.map