pne-ui 4.0.25 → 4.0.28

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 { ButtonProps } from '@mui/material';
2
- import * as React from 'react';
2
+ import * as React from "react";
3
3
  export type PneButtonStyle = 'contained' | 'outlined' | 'error' | 'text';
4
4
  declare const PneButton: <C extends React.ElementType>(props: ButtonProps<C, {
5
5
  component?: C;
@@ -2,44 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const material_1 = require("@mui/material");
5
- const styles_1 = require("@mui/material/styles");
6
5
  const React = tslib_1.__importStar(require("react"));
7
- const buttonSizeConfig = {
8
- small: {
9
- height: 28,
10
- verticalPadding: 4,
11
- horizontalPadding: 16,
12
- iconNearPadding: 12,
13
- iconFarPadding: 16,
14
- iconOnlyPadding: 6,
15
- gap: 4,
16
- },
17
- medium: {
18
- height: 32,
19
- verticalPadding: 6,
20
- horizontalPadding: 20,
21
- iconNearPadding: 16,
22
- iconFarPadding: 20,
23
- iconOnlyPadding: 8,
24
- gap: 8,
25
- },
26
- large: {
27
- height: 40,
28
- verticalPadding: 10,
29
- horizontalPadding: 20,
30
- iconNearPadding: 16,
31
- iconFarPadding: 20,
32
- iconOnlyPadding: 10,
33
- gap: 8,
34
- },
35
- };
36
- const isPneButtonSize = (size) => {
37
- return size === 'small' || size === 'medium' || size === 'large';
38
- };
39
6
  // https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
40
7
  const PneButton = (props) => {
41
- const { sx, children, variant, color, size = 'large', pneStyle, startIcon, endIcon, ...rest } = props;
42
- const resolvedSize = isPneButtonSize(size) ? size : 'large';
8
+ const { sx, children, variant, color, size = 'large', pneStyle, ...rest } = props;
43
9
  let finalVariant = 'contained';
44
10
  let finalColor = 'primary';
45
11
  if (pneStyle) {
@@ -68,131 +34,17 @@ const PneButton = (props) => {
68
34
  finalVariant = variant || finalVariant;
69
35
  finalColor = color || finalColor;
70
36
  }
71
- const hasStartIcon = Boolean(startIcon);
72
- const hasEndIcon = Boolean(endIcon);
73
- const hasChildren = React.Children.count(children) > 0;
74
- const iconOnly = !hasChildren && (hasStartIcon || hasEndIcon);
75
37
  const _sx = [
76
- createButtonSx({
77
- color: finalColor,
78
- hasEndIcon,
79
- hasStartIcon,
80
- iconOnly,
81
- size: resolvedSize,
82
- variant: finalVariant,
83
- }),
38
+ {
39
+ height: size === 'large' ? '40px' : 'inherit',
40
+ fontSize: '12px',
41
+ lineHeight: '22px',
42
+ fontWeight: '400',
43
+ textTransform: 'initial'
44
+ },
84
45
  ...(Array.isArray(sx) ? sx : [sx])
85
46
  ];
86
- return React.createElement(material_1.Button, { sx: _sx, variant: finalVariant, color: finalColor, size: resolvedSize, startIcon: startIcon, endIcon: endIcon, ...rest }, children);
87
- };
88
- const createButtonSx = (options) => theme => {
89
- const config = buttonSizeConfig[options.size];
90
- const iconOnlyPadding = config.iconOnlyPadding;
91
- const iconOnlySize = 16 + iconOnlyPadding * 2;
92
- return {
93
- ...createButtonBaseSx(config, options, iconOnlyPadding, iconOnlySize),
94
- ...createPrimaryButtonColorSx(theme, options.variant, options.color),
95
- };
96
- };
97
- const createButtonBaseSx = (config, options, iconOnlyPadding, iconOnlySize) => {
98
- const padding = getButtonPadding(config, options, iconOnlyPadding);
99
- return {
100
- borderRadius: '4px',
101
- boxShadow: 'none',
102
- boxSizing: 'border-box',
103
- fontFamily: 'Arial, sans-serif',
104
- fontSize: '14px',
105
- fontWeight: 400,
106
- gap: options.iconOnly ? 0 : `${config.gap}px`,
107
- height: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
108
- lineHeight: '20px',
109
- minHeight: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
110
- minWidth: options.iconOnly ? `${iconOnlySize}px` : 0,
111
- padding,
112
- textTransform: 'none',
113
- ...(options.iconOnly ? { width: `${iconOnlySize}px` } : {}),
114
- '&:hover': {
115
- boxShadow: 'none',
116
- },
117
- '&:active': {
118
- boxShadow: 'none',
119
- },
120
- '&&& .MuiButton-startIcon, &&& .MuiButton-endIcon': {
121
- display: 'inline-flex',
122
- marginLeft: 0,
123
- marginRight: 0,
124
- },
125
- '&&& .MuiButton-startIcon > *:nth-of-type(1), &&& .MuiButton-endIcon > *:nth-of-type(1)': {
126
- fontSize: 16,
127
- },
128
- '&&& .MuiButton-startIcon svg, &&& .MuiButton-endIcon svg': {
129
- height: 16,
130
- width: 16,
131
- },
132
- };
133
- };
134
- const getButtonPadding = (config, options, iconOnlyPadding) => {
135
- if (options.iconOnly) {
136
- return `${iconOnlyPadding}px`;
137
- }
138
- if (options.hasStartIcon) {
139
- return `${config.verticalPadding}px ${config.iconFarPadding}px ${config.verticalPadding}px ${config.iconNearPadding}px`;
140
- }
141
- if (options.hasEndIcon) {
142
- return `${config.verticalPadding}px ${config.iconNearPadding}px ${config.verticalPadding}px ${config.iconFarPadding}px`;
143
- }
144
- return `${config.verticalPadding}px ${config.horizontalPadding}px`;
145
- };
146
- const createPrimaryButtonColorSx = (theme, variant, color) => {
147
- if (color !== 'primary') {
148
- return {};
149
- }
150
- const feedbackBackgroundColor = (0, styles_1.alpha)(theme.palette.primary.main, 0.1);
151
- if (variant === 'contained') {
152
- return {
153
- backgroundColor: theme.palette.primary.main,
154
- color: theme.palette.primary.contrastText,
155
- '&:hover, &:active': {
156
- backgroundColor: theme.palette.primary.dark,
157
- boxShadow: 'none',
158
- },
159
- '&.Mui-disabled': {
160
- backgroundColor: '#B0B7C3',
161
- color: '#fff',
162
- },
163
- };
164
- }
165
- if (variant === 'outlined') {
166
- return {
167
- backgroundColor: 'transparent',
168
- borderColor: theme.palette.primary.main,
169
- color: theme.palette.primary.main,
170
- '&:hover, &:active': {
171
- backgroundColor: feedbackBackgroundColor,
172
- borderColor: theme.palette.primary.dark,
173
- color: theme.palette.primary.dark,
174
- },
175
- '&.Mui-disabled': {
176
- backgroundColor: 'transparent',
177
- borderColor: '#B0B7C3',
178
- color: '#B0B7C3',
179
- },
180
- };
181
- }
182
- if (variant === 'text') {
183
- return {
184
- color: theme.palette.primary.main,
185
- '&:hover, &:active': {
186
- backgroundColor: feedbackBackgroundColor,
187
- color: theme.palette.primary.dark,
188
- },
189
- '&.Mui-disabled': {
190
- backgroundColor: 'transparent',
191
- color: '#B0B7C3',
192
- },
193
- };
194
- }
195
- return {};
47
+ return React.createElement(material_1.Button, { sx: _sx, variant: finalVariant, color: finalColor, size: size, ...rest }, children);
196
48
  };
197
49
  exports.default = PneButton;
198
50
  //# sourceMappingURL=PneButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":";;;AAAA,4CAA2D;AAC3D,qDAA+B;AAI/B,uFAAuF;AACvF,MAAM,SAAS,GAAG,CACd,KAAsE,EACxE,EAAE;IACA,MAAM,EACF,EAAE,EACF,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IAEV,IAAI,YAAY,GAA2B,WAAW,CAAA;IACtD,IAAI,UAAU,GAAyB,SAAS,CAAA;IAEhD,IAAI,QAAQ,EAAE,CAAC;QACX,QAAQ,QAAQ,EAAE,CAAC;YACf,KAAK,WAAW;gBACZ,YAAY,GAAG,WAAW,CAAA;gBAC1B,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,UAAU;gBACX,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,OAAO;gBACR,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,OAAO,CAAA;gBACpB,MAAK;YACT,KAAK,MAAM;gBACP,YAAY,GAAG,MAAM,CAAA;gBACrB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT;gBACI,OAAO,CAAC,IAAI,CAAC,qBAAqB,QAAQ,EAAE,CAAC,CAAA;QACrD,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,YAAY,GAAG,OAAO,IAAI,YAAY,CAAA;QACtC,UAAU,GAAG,KAAK,IAAI,UAAU,CAAA;IACpC,CAAC;IAED,MAAM,GAAG,GAAY;QACjB;YACI,MAAM,EAAE,IAAI,KAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC5C,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,SAAS;SAC3B;QACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACrC,CAAA;IAED,OAAO,oBAAC,iBAAM,IAAC,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,KAAM,IAAI,IAAG,QAAQ,CAAU,CAAA;AAC/G,CAAC,CAAA;AAED,kBAAe,SAAS,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { ButtonProps } from '@mui/material';
2
- import * as React from 'react';
2
+ import * as React from "react";
3
3
  export type PneButtonStyle = 'contained' | 'outlined' | 'error' | 'text';
4
4
  declare const PneButton: <C extends React.ElementType>(props: ButtonProps<C, {
5
5
  component?: C;
@@ -1,42 +1,8 @@
1
1
  import { Button } from '@mui/material';
2
- import { alpha } from '@mui/material/styles';
3
- import * as React from 'react';
4
- const buttonSizeConfig = {
5
- small: {
6
- height: 28,
7
- verticalPadding: 4,
8
- horizontalPadding: 16,
9
- iconNearPadding: 12,
10
- iconFarPadding: 16,
11
- iconOnlyPadding: 6,
12
- gap: 4,
13
- },
14
- medium: {
15
- height: 32,
16
- verticalPadding: 6,
17
- horizontalPadding: 20,
18
- iconNearPadding: 16,
19
- iconFarPadding: 20,
20
- iconOnlyPadding: 8,
21
- gap: 8,
22
- },
23
- large: {
24
- height: 40,
25
- verticalPadding: 10,
26
- horizontalPadding: 20,
27
- iconNearPadding: 16,
28
- iconFarPadding: 20,
29
- iconOnlyPadding: 10,
30
- gap: 8,
31
- },
32
- };
33
- const isPneButtonSize = (size) => {
34
- return size === 'small' || size === 'medium' || size === 'large';
35
- };
2
+ import * as React from "react";
36
3
  // https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
37
4
  const PneButton = (props) => {
38
- const { sx, children, variant, color, size = 'large', pneStyle, startIcon, endIcon, ...rest } = props;
39
- const resolvedSize = isPneButtonSize(size) ? size : 'large';
5
+ const { sx, children, variant, color, size = 'large', pneStyle, ...rest } = props;
40
6
  let finalVariant = 'contained';
41
7
  let finalColor = 'primary';
42
8
  if (pneStyle) {
@@ -65,131 +31,17 @@ const PneButton = (props) => {
65
31
  finalVariant = variant || finalVariant;
66
32
  finalColor = color || finalColor;
67
33
  }
68
- const hasStartIcon = Boolean(startIcon);
69
- const hasEndIcon = Boolean(endIcon);
70
- const hasChildren = React.Children.count(children) > 0;
71
- const iconOnly = !hasChildren && (hasStartIcon || hasEndIcon);
72
34
  const _sx = [
73
- createButtonSx({
74
- color: finalColor,
75
- hasEndIcon,
76
- hasStartIcon,
77
- iconOnly,
78
- size: resolvedSize,
79
- variant: finalVariant,
80
- }),
35
+ {
36
+ height: size === 'large' ? '40px' : 'inherit',
37
+ fontSize: '12px',
38
+ lineHeight: '22px',
39
+ fontWeight: '400',
40
+ textTransform: 'initial'
41
+ },
81
42
  ...(Array.isArray(sx) ? sx : [sx])
82
43
  ];
83
- return React.createElement(Button, { sx: _sx, variant: finalVariant, color: finalColor, size: resolvedSize, startIcon: startIcon, endIcon: endIcon, ...rest }, children);
84
- };
85
- const createButtonSx = (options) => theme => {
86
- const config = buttonSizeConfig[options.size];
87
- const iconOnlyPadding = config.iconOnlyPadding;
88
- const iconOnlySize = 16 + iconOnlyPadding * 2;
89
- return {
90
- ...createButtonBaseSx(config, options, iconOnlyPadding, iconOnlySize),
91
- ...createPrimaryButtonColorSx(theme, options.variant, options.color),
92
- };
93
- };
94
- const createButtonBaseSx = (config, options, iconOnlyPadding, iconOnlySize) => {
95
- const padding = getButtonPadding(config, options, iconOnlyPadding);
96
- return {
97
- borderRadius: '4px',
98
- boxShadow: 'none',
99
- boxSizing: 'border-box',
100
- fontFamily: 'Arial, sans-serif',
101
- fontSize: '14px',
102
- fontWeight: 400,
103
- gap: options.iconOnly ? 0 : `${config.gap}px`,
104
- height: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
105
- lineHeight: '20px',
106
- minHeight: options.iconOnly ? `${iconOnlySize}px` : `${config.height}px`,
107
- minWidth: options.iconOnly ? `${iconOnlySize}px` : 0,
108
- padding,
109
- textTransform: 'none',
110
- ...(options.iconOnly ? { width: `${iconOnlySize}px` } : {}),
111
- '&:hover': {
112
- boxShadow: 'none',
113
- },
114
- '&:active': {
115
- boxShadow: 'none',
116
- },
117
- '&&& .MuiButton-startIcon, &&& .MuiButton-endIcon': {
118
- display: 'inline-flex',
119
- marginLeft: 0,
120
- marginRight: 0,
121
- },
122
- '&&& .MuiButton-startIcon > *:nth-of-type(1), &&& .MuiButton-endIcon > *:nth-of-type(1)': {
123
- fontSize: 16,
124
- },
125
- '&&& .MuiButton-startIcon svg, &&& .MuiButton-endIcon svg': {
126
- height: 16,
127
- width: 16,
128
- },
129
- };
130
- };
131
- const getButtonPadding = (config, options, iconOnlyPadding) => {
132
- if (options.iconOnly) {
133
- return `${iconOnlyPadding}px`;
134
- }
135
- if (options.hasStartIcon) {
136
- return `${config.verticalPadding}px ${config.iconFarPadding}px ${config.verticalPadding}px ${config.iconNearPadding}px`;
137
- }
138
- if (options.hasEndIcon) {
139
- return `${config.verticalPadding}px ${config.iconNearPadding}px ${config.verticalPadding}px ${config.iconFarPadding}px`;
140
- }
141
- return `${config.verticalPadding}px ${config.horizontalPadding}px`;
142
- };
143
- const createPrimaryButtonColorSx = (theme, variant, color) => {
144
- if (color !== 'primary') {
145
- return {};
146
- }
147
- const feedbackBackgroundColor = alpha(theme.palette.primary.main, 0.1);
148
- if (variant === 'contained') {
149
- return {
150
- backgroundColor: theme.palette.primary.main,
151
- color: theme.palette.primary.contrastText,
152
- '&:hover, &:active': {
153
- backgroundColor: theme.palette.primary.dark,
154
- boxShadow: 'none',
155
- },
156
- '&.Mui-disabled': {
157
- backgroundColor: '#B0B7C3',
158
- color: '#fff',
159
- },
160
- };
161
- }
162
- if (variant === 'outlined') {
163
- return {
164
- backgroundColor: 'transparent',
165
- borderColor: theme.palette.primary.main,
166
- color: theme.palette.primary.main,
167
- '&:hover, &:active': {
168
- backgroundColor: feedbackBackgroundColor,
169
- borderColor: theme.palette.primary.dark,
170
- color: theme.palette.primary.dark,
171
- },
172
- '&.Mui-disabled': {
173
- backgroundColor: 'transparent',
174
- borderColor: '#B0B7C3',
175
- color: '#B0B7C3',
176
- },
177
- };
178
- }
179
- if (variant === 'text') {
180
- return {
181
- color: theme.palette.primary.main,
182
- '&:hover, &:active': {
183
- backgroundColor: feedbackBackgroundColor,
184
- color: theme.palette.primary.dark,
185
- },
186
- '&.Mui-disabled': {
187
- backgroundColor: 'transparent',
188
- color: '#B0B7C3',
189
- },
190
- };
191
- }
192
- return {};
44
+ return React.createElement(Button, { sx: _sx, variant: finalVariant, color: finalColor, size: size, ...rest }, children);
193
45
  };
194
46
  export default PneButton;
195
47
  //# sourceMappingURL=PneButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PneButton.js","sourceRoot":"","sources":["../../src/component/PneButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAuB,MAAM,eAAe,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,uFAAuF;AACvF,MAAM,SAAS,GAAG,CACd,KAAsE,EACxE,EAAE;IACA,MAAM,EACF,EAAE,EACF,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IAEV,IAAI,YAAY,GAA2B,WAAW,CAAA;IACtD,IAAI,UAAU,GAAyB,SAAS,CAAA;IAEhD,IAAI,QAAQ,EAAE,CAAC;QACX,QAAQ,QAAQ,EAAE,CAAC;YACf,KAAK,WAAW;gBACZ,YAAY,GAAG,WAAW,CAAA;gBAC1B,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,UAAU;gBACX,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT,KAAK,OAAO;gBACR,YAAY,GAAG,UAAU,CAAA;gBACzB,UAAU,GAAG,OAAO,CAAA;gBACpB,MAAK;YACT,KAAK,MAAM;gBACP,YAAY,GAAG,MAAM,CAAA;gBACrB,UAAU,GAAG,SAAS,CAAA;gBACtB,MAAK;YACT;gBACI,OAAO,CAAC,IAAI,CAAC,qBAAqB,QAAQ,EAAE,CAAC,CAAA;QACrD,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,YAAY,GAAG,OAAO,IAAI,YAAY,CAAA;QACtC,UAAU,GAAG,KAAK,IAAI,UAAU,CAAA;IACpC,CAAC;IAED,MAAM,GAAG,GAAY;QACjB;YACI,MAAM,EAAE,IAAI,KAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC5C,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,SAAS;SAC3B;QACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACrC,CAAA;IAED,OAAO,oBAAC,MAAM,IAAC,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,KAAM,IAAI,IAAG,QAAQ,CAAU,CAAA;AAC/G,CAAC,CAAA;AAED,eAAe,SAAS,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pne-ui",
3
- "version": "4.0.25",
3
+ "version": "4.0.28",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",