@mw-kit/mw-ui 1.8.7 → 1.8.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import type { ColorOptions } from '../../theme/interfaces';
2
- export type Types = 'default' | 'info' | 'danger' | 'success' | 'warning';
2
+ export type Types = 'default' | 'info' | 'danger' | 'success' | 'warning' | 'temporary';
3
3
  export type Sizes = 'mini' | 'medium' | 'small';
4
4
  export interface IndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
5
5
  size: Sizes;
@@ -1,8 +1,7 @@
1
1
  export interface ProgressBarProps {
2
2
  type: 'default' | 'info' | 'danger' | 'success' | 'warning';
3
- value: string;
3
+ value: number | null;
4
4
  }
5
5
  export interface StyledProgressBarProps {
6
6
  $type: ProgressBarProps['type'];
7
- $value: ProgressBarProps['value'];
8
7
  }
@@ -1,3 +1,5 @@
1
1
  import type { StyledProgressBarProps } from './interfaces';
2
- export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
+ export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
+ $disabled: boolean;
4
+ }>> & string;
3
5
  export declare const Progress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarProps>> & string;
package/dist/index.d.mts CHANGED
@@ -931,7 +931,7 @@ interface TimeProps extends Omit<InputProps$1, 'type' | 'mask'> {
931
931
  value: string;
932
932
  }
933
933
 
934
- type Types = 'default' | 'info' | 'danger' | 'success' | 'warning';
934
+ type Types = 'default' | 'info' | 'danger' | 'success' | 'warning' | 'temporary';
935
935
  type Sizes = 'mini' | 'medium' | 'small';
936
936
  interface IndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
937
937
  size: Sizes;
@@ -1501,7 +1501,7 @@ declare const Placeholder: (props: PlaceholderProps) => react_jsx_runtime.JSX.El
1501
1501
 
1502
1502
  interface ProgressBarProps {
1503
1503
  type: 'default' | 'info' | 'danger' | 'success' | 'warning';
1504
- value: string;
1504
+ value: number | null;
1505
1505
  }
1506
1506
 
1507
1507
  declare const ProgressBar: ({ type, value, ...props }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -9065,7 +9065,8 @@ var types = {
9065
9065
  info: "blue",
9066
9066
  danger: "warningRed",
9067
9067
  success: "green",
9068
- warning: "warningYellow"
9068
+ warning: "warningYellow",
9069
+ temporary: "purple"
9069
9070
  };
9070
9071
 
9071
9072
  // src/components/Indicator/styles.ts
@@ -16858,51 +16859,51 @@ var Container25 = import_styled_components71.default.div`
16858
16859
  display: flex;
16859
16860
  flex-direction: row;
16860
16861
  align-items: center;
16862
+ opacity: ${({ $disabled: disabled }) => disabled ? 0.5 : 1};
16863
+ width: 100%;
16861
16864
 
16862
- span {
16865
+ > span {
16863
16866
  display: inline-block;
16864
16867
  margin-left: 7px;
16865
16868
  color: #000000cc;
16866
16869
  }
16867
16870
  `;
16868
16871
  var Progress = import_styled_components71.default.div`
16869
- width: 64px;
16872
+ width: 100%;
16870
16873
  height: 12px;
16871
16874
  border: 1px solid #e4e4e4;
16872
- div {
16873
- width: ${({ $value: value }) => `${value}%`};
16874
- max-width: 64px;
16875
- height: 100%;
16876
- ${({ theme: theme4, $type: type }) => type === "default" && import_styled_components71.css`
16877
- background-color: ${theme4.colors.warningGray};
16878
- `}
16879
16875
 
16880
- ${({ theme: theme4, $type: type }) => type === "info" && import_styled_components71.css`
16881
- background-color: ${theme4.colors.blue};
16882
- `}
16876
+ > span {
16877
+ content: '';
16878
+ display: flex;
16883
16879
 
16884
- ${({ theme: theme4, $type: type }) => type === "danger" && import_styled_components71.css`
16885
- background-color: ${theme4.colors.warningRed};
16886
- `}
16880
+ height: 100%;
16887
16881
 
16888
- ${({ theme: theme4, $type: type }) => type === "success" && import_styled_components71.css`
16889
- background-color: ${theme4.colors.green};
16890
- `}
16882
+ transition-property: width background-color;
16883
+ transition-duration: 0.25s;
16884
+ transition-timing-function: ease-in-out;
16891
16885
 
16892
- ${({ theme: theme4, $type: type }) => type === "warning" && import_styled_components71.css`
16893
- background-color: ${theme4.colors.warningYellow};
16894
- `}
16886
+ background-color: ${({ theme: theme4, $type: type }) => {
16887
+ const colors2 = {
16888
+ default: "warningGray",
16889
+ info: "blue",
16890
+ danger: "warningRed",
16891
+ success: "green",
16892
+ warning: "warningYellow"
16893
+ };
16894
+ return theme4.colors[colors2[type]];
16895
+ }};
16895
16896
  }
16896
16897
  `;
16897
16898
 
16898
16899
  // src/components/ProgressBar/index.tsx
16899
16900
  var import_jsx_runtime359 = require("react/jsx-runtime");
16900
16901
  var ProgressBar = ({ type, value, ...props }) => {
16901
- return /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)(Container25, { children: [
16902
- /* @__PURE__ */ (0, import_jsx_runtime359.jsx)(Progress, { ...props, $type: type, $value: value, children: /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("div", {}) }),
16902
+ return /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)(Container25, { $disabled: value === null, children: [
16903
+ /* @__PURE__ */ (0, import_jsx_runtime359.jsx)(Progress, { ...props, $type: type, children: /* @__PURE__ */ (0, import_jsx_runtime359.jsx)("span", { style: { width: `${value || 0}%` } }) }),
16903
16904
  /* @__PURE__ */ (0, import_jsx_runtime359.jsxs)("span", { children: [
16904
16905
  " ",
16905
- value || "0",
16906
+ value === null ? "-" : value,
16906
16907
  "%"
16907
16908
  ] })
16908
16909
  ] });
@@ -17137,10 +17138,7 @@ var Close2 = (props) => {
17137
17138
  if (!await onClose(index, options[index], event)) {
17138
17139
  return;
17139
17140
  }
17140
- const newactive = (() => {
17141
- if (index < active) return active - 1;
17142
- return active > 0 ? active - 1 : active;
17143
- })();
17141
+ const newactive = index < active || !newOptions[active] ? active - 1 : active;
17144
17142
  setActive(newactive, newOptions[newactive].data);
17145
17143
  setOptions(newOptions);
17146
17144
  },
package/dist/index.mjs CHANGED
@@ -9008,7 +9008,8 @@ var types = {
9008
9008
  info: "blue",
9009
9009
  danger: "warningRed",
9010
9010
  success: "green",
9011
- warning: "warningYellow"
9011
+ warning: "warningYellow",
9012
+ temporary: "purple"
9012
9013
  };
9013
9014
 
9014
9015
  // src/components/Indicator/styles.ts
@@ -16796,56 +16797,56 @@ var Placeholder = (props) => {
16796
16797
  var Placeholder_default = Placeholder;
16797
16798
 
16798
16799
  // src/components/ProgressBar/styles.ts
16799
- import styled68, { css as css48 } from "styled-components";
16800
+ import styled68 from "styled-components";
16800
16801
  var Container25 = styled68.div`
16801
16802
  display: flex;
16802
16803
  flex-direction: row;
16803
16804
  align-items: center;
16805
+ opacity: ${({ $disabled: disabled }) => disabled ? 0.5 : 1};
16806
+ width: 100%;
16804
16807
 
16805
- span {
16808
+ > span {
16806
16809
  display: inline-block;
16807
16810
  margin-left: 7px;
16808
16811
  color: #000000cc;
16809
16812
  }
16810
16813
  `;
16811
16814
  var Progress = styled68.div`
16812
- width: 64px;
16815
+ width: 100%;
16813
16816
  height: 12px;
16814
16817
  border: 1px solid #e4e4e4;
16815
- div {
16816
- width: ${({ $value: value }) => `${value}%`};
16817
- max-width: 64px;
16818
- height: 100%;
16819
- ${({ theme: theme4, $type: type }) => type === "default" && css48`
16820
- background-color: ${theme4.colors.warningGray};
16821
- `}
16822
16818
 
16823
- ${({ theme: theme4, $type: type }) => type === "info" && css48`
16824
- background-color: ${theme4.colors.blue};
16825
- `}
16819
+ > span {
16820
+ content: '';
16821
+ display: flex;
16826
16822
 
16827
- ${({ theme: theme4, $type: type }) => type === "danger" && css48`
16828
- background-color: ${theme4.colors.warningRed};
16829
- `}
16823
+ height: 100%;
16830
16824
 
16831
- ${({ theme: theme4, $type: type }) => type === "success" && css48`
16832
- background-color: ${theme4.colors.green};
16833
- `}
16825
+ transition-property: width background-color;
16826
+ transition-duration: 0.25s;
16827
+ transition-timing-function: ease-in-out;
16834
16828
 
16835
- ${({ theme: theme4, $type: type }) => type === "warning" && css48`
16836
- background-color: ${theme4.colors.warningYellow};
16837
- `}
16829
+ background-color: ${({ theme: theme4, $type: type }) => {
16830
+ const colors2 = {
16831
+ default: "warningGray",
16832
+ info: "blue",
16833
+ danger: "warningRed",
16834
+ success: "green",
16835
+ warning: "warningYellow"
16836
+ };
16837
+ return theme4.colors[colors2[type]];
16838
+ }};
16838
16839
  }
16839
16840
  `;
16840
16841
 
16841
16842
  // src/components/ProgressBar/index.tsx
16842
16843
  import { jsx as jsx359, jsxs as jsxs180 } from "react/jsx-runtime";
16843
16844
  var ProgressBar = ({ type, value, ...props }) => {
16844
- return /* @__PURE__ */ jsxs180(Container25, { children: [
16845
- /* @__PURE__ */ jsx359(Progress, { ...props, $type: type, $value: value, children: /* @__PURE__ */ jsx359("div", {}) }),
16845
+ return /* @__PURE__ */ jsxs180(Container25, { $disabled: value === null, children: [
16846
+ /* @__PURE__ */ jsx359(Progress, { ...props, $type: type, children: /* @__PURE__ */ jsx359("span", { style: { width: `${value || 0}%` } }) }),
16846
16847
  /* @__PURE__ */ jsxs180("span", { children: [
16847
16848
  " ",
16848
- value || "0",
16849
+ value === null ? "-" : value,
16849
16850
  "%"
16850
16851
  ] })
16851
16852
  ] });
@@ -16909,7 +16910,7 @@ var ScrollButton = (props) => {
16909
16910
  var ScrollButton_default = ScrollButton;
16910
16911
 
16911
16912
  // src/components/Tabs/components/ScrollButtons/styled.ts
16912
- import styled70, { css as css49 } from "styled-components";
16913
+ import styled70, { css as css48 } from "styled-components";
16913
16914
  var Container27 = styled70.div`
16914
16915
  overflow-x: auto;
16915
16916
  scrollbar-width: thin;
@@ -16925,7 +16926,7 @@ var Container27 = styled70.div`
16925
16926
  display: none; /* Chrome, Safari, Opera */
16926
16927
  }
16927
16928
 
16928
- ${({ theme: theme4, $internal: internal }) => internal && css49`
16929
+ ${({ theme: theme4, $internal: internal }) => internal && css48`
16929
16930
  gap: ${theme4.spacings.s6};
16930
16931
  `}
16931
16932
  `;
@@ -17080,10 +17081,7 @@ var Close2 = (props) => {
17080
17081
  if (!await onClose(index, options[index], event)) {
17081
17082
  return;
17082
17083
  }
17083
- const newactive = (() => {
17084
- if (index < active) return active - 1;
17085
- return active > 0 ? active - 1 : active;
17086
- })();
17084
+ const newactive = index < active || !newOptions[active] ? active - 1 : active;
17087
17085
  setActive(newactive, newOptions[newactive].data);
17088
17086
  setOptions(newOptions);
17089
17087
  },
@@ -17107,7 +17105,7 @@ var Close_default = Close2;
17107
17105
  import { useState as useState25 } from "react";
17108
17106
 
17109
17107
  // src/components/Tabs/components/TabItem/components/LabelItem/styled.ts
17110
- import styled72, { css as css50 } from "styled-components";
17108
+ import styled72, { css as css49 } from "styled-components";
17111
17109
  var StyledTab = styled72.div`
17112
17110
  position: relative;
17113
17111
  flex: 1;
@@ -17141,7 +17139,7 @@ var StyledTab = styled72.div`
17141
17139
  transition: --color 0.5s, --bgColor 0.5s;
17142
17140
  }
17143
17141
 
17144
- ${({ $primary, $hasSiblings, $internal }) => $primary && $hasSiblings && !$internal && css50`
17142
+ ${({ $primary, $hasSiblings, $internal }) => $primary && $hasSiblings && !$internal && css49`
17145
17143
  &::before {
17146
17144
  content: '';
17147
17145
  position: absolute;
@@ -17263,7 +17261,7 @@ var TabItem = (props) => {
17263
17261
  var TabItem_default = TabItem;
17264
17262
 
17265
17263
  // src/components/Tabs/styled.ts
17266
- import styled74, { css as css51 } from "styled-components";
17264
+ import styled74, { css as css50 } from "styled-components";
17267
17265
  var delimiters = {
17268
17266
  blue: ["blue"],
17269
17267
  grey: ["warningGray"]
@@ -17284,7 +17282,7 @@ var Tabs = styled74.div`
17284
17282
  bottom: "s4",
17285
17283
  left: "0"
17286
17284
  }).split(" ");
17287
- return css51`
17285
+ return css50`
17288
17286
  margin: ${top} 0 ${bottom} 0;
17289
17287
  padding: 0 ${right} 0 ${left};
17290
17288
  `;
@@ -17292,7 +17290,7 @@ var Tabs = styled74.div`
17292
17290
 
17293
17291
  ${({ theme: theme4, $internal: internal, $delimiter: delimiter }) => {
17294
17292
  const border = delimiter === "none" ? "none" : internal ? `1px solid ${theme4.getColor(...delimiters[delimiter || "grey"])}` : `2px solid ${theme4.getColor(...delimiters[delimiter || "blue"])}`;
17295
- return css51`
17293
+ return css50`
17296
17294
  border-bottom: ${border};
17297
17295
  + ${ComponentContainer} {
17298
17296
  border: 1px solid ${theme4.getColor(...delimiters.grey)};
@@ -17448,7 +17446,7 @@ var TextArea = ({
17448
17446
  var TextArea_default = TextArea;
17449
17447
 
17450
17448
  // src/components/Toast/styles.ts
17451
- import styled76, { css as css52 } from "styled-components";
17449
+ import styled76, { css as css51 } from "styled-components";
17452
17450
  var Container30 = styled76.div`
17453
17451
  border-radius: 4px;
17454
17452
  width: ${({ $size: size3 }) => size3 === "large" ? "837px" : "460px"};
@@ -17456,7 +17454,7 @@ var Container30 = styled76.div`
17456
17454
  border: 1px solid transparent;
17457
17455
  position: relative;
17458
17456
 
17459
- ${({ $color: color }) => color === "success" && css52`
17457
+ ${({ $color: color }) => color === "success" && css51`
17460
17458
  background-color: #fcfff5;
17461
17459
  opacity: 1;
17462
17460
  border-color: #a8c599;
@@ -17468,7 +17466,7 @@ var Container30 = styled76.div`
17468
17466
  }
17469
17467
  `}
17470
17468
 
17471
- ${({ $color: color }) => color === "error" && css52`
17469
+ ${({ $color: color }) => color === "error" && css51`
17472
17470
  background-color: #fff6f6;
17473
17471
  opacity: 1;
17474
17472
  border-color: #973937;
@@ -17480,7 +17478,7 @@ var Container30 = styled76.div`
17480
17478
  }
17481
17479
  `}
17482
17480
 
17483
- ${({ $color: color }) => color === "warning" && css52`
17481
+ ${({ $color: color }) => color === "warning" && css51`
17484
17482
  background-color: #fffaf3;
17485
17483
  opacity: 1;
17486
17484
  border-color: #ccbea0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mw-kit/mw-ui",
3
- "version": "1.8.7",
3
+ "version": "1.8.9",
4
4
  "description": "Made with create-react-library",
5
5
  "author": "fmgusmao",
6
6
  "license": "MIT",