@moderneinc/neo-styled-components 0.0.0-development → 1.6.1-next.1d880f
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.
- package/dist/Badge.d.ts +24 -0
- package/dist/index.d.ts +24 -6
- package/dist/index.esm.js +91 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +91 -1
- package/dist/index.js.map +1 -1
- package/package.json +10 -4
package/dist/Badge.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type ChipProps } from '@mui/material/Chip';
|
|
2
|
+
export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
3
|
+
/**
|
|
4
|
+
* The color/state of the badge
|
|
5
|
+
* @default "default"
|
|
6
|
+
*/
|
|
7
|
+
color?: 'default' | 'error' | 'warning' | 'success' | 'info';
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* NeoBadge - Status badge component based on MUI Chip
|
|
11
|
+
*
|
|
12
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
|
|
13
|
+
*
|
|
14
|
+
* Figma Props Mapping:
|
|
15
|
+
* - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
|
|
16
|
+
* - iconLeading → icon prop (pass React element)
|
|
17
|
+
* - iconTrailing → deleteIcon prop (pass React element)
|
|
18
|
+
* - Label → label prop
|
|
19
|
+
*/
|
|
20
|
+
export declare const NeoBadge: {
|
|
21
|
+
(props: NeoBadgeProps): import("react/jsx-dev-runtime").JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
};
|
|
24
|
+
export default NeoBadge;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_dev_runtime from 'react/jsx-dev-runtime';
|
|
2
|
+
import { ChipProps } from '@mui/material/Chip';
|
|
3
|
+
|
|
4
|
+
interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
5
|
+
/**
|
|
6
|
+
* The color/state of the badge
|
|
7
|
+
* @default "default"
|
|
8
|
+
*/
|
|
9
|
+
color?: 'default' | 'error' | 'warning' | 'success' | 'info';
|
|
10
|
+
}
|
|
1
11
|
/**
|
|
2
|
-
*
|
|
12
|
+
* NeoBadge - Status badge component based on MUI Chip
|
|
13
|
+
*
|
|
14
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
|
|
3
15
|
*
|
|
4
|
-
*
|
|
16
|
+
* Figma Props Mapping:
|
|
17
|
+
* - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
|
|
18
|
+
* - iconLeading → icon prop (pass React element)
|
|
19
|
+
* - iconTrailing → deleteIcon prop (pass React element)
|
|
20
|
+
* - Label → label prop
|
|
5
21
|
*/
|
|
22
|
+
declare const NeoBadge: {
|
|
23
|
+
(props: NeoBadgeProps): react_jsx_dev_runtime.JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
6
26
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
export { version };
|
|
27
|
+
export { NeoBadge, NeoBadge as default };
|
|
28
|
+
export type { NeoBadgeProps };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,11 +1,100 @@
|
|
|
1
|
+
import { jsxDEV } from 'react/jsx-dev-runtime';
|
|
2
|
+
import { semanticColors, spacing, borderRadius, typography } from '@moderneinc/neo-design';
|
|
3
|
+
import Chip, { chipClasses } from '@mui/material/Chip';
|
|
4
|
+
import { styled } from '@mui/material/styles';
|
|
5
|
+
|
|
6
|
+
const _jsxFileName = "/home/runner/work/neo-design/neo-design/packages/styled-components/src/Badge.tsx";
|
|
7
|
+
const StyledChip = styled(Chip)(({ theme }) => ({
|
|
8
|
+
height: 24,
|
|
9
|
+
padding: `${spacing.spacing_1_4}px ${spacing.spacing_1}px`,
|
|
10
|
+
borderRadius: borderRadius.full,
|
|
11
|
+
fontSize: theme.typography.pxToRem(typography.fontSize.xs),
|
|
12
|
+
lineHeight: 1,
|
|
13
|
+
gap: spacing.spacing_1_2,
|
|
14
|
+
overflow: 'visible',
|
|
15
|
+
[`& .${chipClasses.label}`]: {
|
|
16
|
+
padding: 0,
|
|
17
|
+
overflow: 'visible',
|
|
18
|
+
},
|
|
19
|
+
[`& .${chipClasses.icon}`]: {
|
|
20
|
+
margin: 0,
|
|
21
|
+
width: 12,
|
|
22
|
+
height: 12,
|
|
23
|
+
},
|
|
24
|
+
[`& .${chipClasses.deleteIcon}`]: {
|
|
25
|
+
margin: 0,
|
|
26
|
+
width: 12,
|
|
27
|
+
height: 12,
|
|
28
|
+
},
|
|
29
|
+
// Default (Neutral) state
|
|
30
|
+
[`&.${chipClasses.colorDefault}`]: {
|
|
31
|
+
backgroundColor: semanticColors.status.neutral.light,
|
|
32
|
+
color: semanticColors.status.neutral.dark,
|
|
33
|
+
border: `1px solid ${semanticColors.status.neutral.medium}80`,
|
|
34
|
+
[`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
|
|
35
|
+
color: semanticColors.status.neutral.dark,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
// Error state
|
|
39
|
+
[`&.${chipClasses.colorError}`]: {
|
|
40
|
+
backgroundColor: semanticColors.status.error.light,
|
|
41
|
+
color: semanticColors.status.error.dark,
|
|
42
|
+
border: `1px solid ${semanticColors.status.error.medium}80`,
|
|
43
|
+
[`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
|
|
44
|
+
color: semanticColors.status.error.dark,
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
// Warning state
|
|
48
|
+
[`&.${chipClasses.colorWarning}`]: {
|
|
49
|
+
backgroundColor: semanticColors.status.warning.light,
|
|
50
|
+
color: semanticColors.status.warning.dark,
|
|
51
|
+
border: `1px solid ${semanticColors.status.warning.medium}80`,
|
|
52
|
+
[`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
|
|
53
|
+
color: semanticColors.status.warning.dark,
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
// Success state
|
|
57
|
+
[`&.${chipClasses.colorSuccess}`]: {
|
|
58
|
+
backgroundColor: semanticColors.status.success.light,
|
|
59
|
+
color: semanticColors.status.success.dark,
|
|
60
|
+
border: `1px solid ${semanticColors.status.success.medium}80`,
|
|
61
|
+
[`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
|
|
62
|
+
color: semanticColors.status.success.dark,
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
// Info state
|
|
66
|
+
[`&.${chipClasses.colorInfo}`]: {
|
|
67
|
+
backgroundColor: semanticColors.status.info.light,
|
|
68
|
+
color: semanticColors.status.info.dark,
|
|
69
|
+
border: `1px solid ${semanticColors.status.info.medium}80`,
|
|
70
|
+
[`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
|
|
71
|
+
color: semanticColors.status.info.dark,
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
}));
|
|
75
|
+
/**
|
|
76
|
+
* NeoBadge - Status badge component based on MUI Chip
|
|
77
|
+
*
|
|
78
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
|
|
79
|
+
*
|
|
80
|
+
* Figma Props Mapping:
|
|
81
|
+
* - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
|
|
82
|
+
* - iconLeading → icon prop (pass React element)
|
|
83
|
+
* - iconTrailing → deleteIcon prop (pass React element)
|
|
84
|
+
* - Label → label prop
|
|
85
|
+
*/
|
|
86
|
+
const NeoBadge = (props) => {
|
|
87
|
+
return jsxDEV(StyledChip, { ...props }, void 0, false, { fileName: _jsxFileName, lineNumber: 107, columnNumber: 9 }, undefined);
|
|
88
|
+
};
|
|
89
|
+
NeoBadge.displayName = 'NeoBadge';
|
|
90
|
+
|
|
1
91
|
/**
|
|
2
92
|
* @moderneinc/neo-styled-components
|
|
3
93
|
*
|
|
4
94
|
* Styled MUI components using Moderne design tokens
|
|
5
95
|
*/
|
|
6
96
|
|
|
7
|
-
// Placeholder - components will be added here
|
|
8
97
|
const version = '0.0.0-development';
|
|
9
98
|
|
|
10
|
-
export { version };
|
|
99
|
+
export { NeoBadge, version };
|
|
11
100
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/index.js"],"sourcesContent":["/**\n * @moderneinc/neo-styled-components\n *\n * Styled MUI components using Moderne design tokens\n */\n\
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/Badge.tsx","../src/index.js"],"sourcesContent":["import { borderRadius, semanticColors, spacing, typography } from '@moderneinc/neo-design'\nimport Chip, { type ChipProps, chipClasses } from '@mui/material/Chip'\nimport { styled } from '@mui/material/styles'\n\nconst StyledChip = styled(Chip)(({ theme }) => ({\n height: 24,\n padding: `${spacing.spacing_1_4}px ${spacing.spacing_1}px`,\n borderRadius: borderRadius.full,\n fontSize: theme.typography.pxToRem(typography.fontSize.xs),\n lineHeight: 1,\n gap: spacing.spacing_1_2,\n overflow: 'visible',\n\n [`& .${chipClasses.label}`]: {\n padding: 0,\n overflow: 'visible',\n },\n\n [`& .${chipClasses.icon}`]: {\n margin: 0,\n width: 12,\n height: 12,\n },\n\n [`& .${chipClasses.deleteIcon}`]: {\n margin: 0,\n width: 12,\n height: 12,\n },\n\n // Default (Neutral) state\n [`&.${chipClasses.colorDefault}`]: {\n backgroundColor: semanticColors.status.neutral.light,\n color: semanticColors.status.neutral.dark,\n border: `1px solid ${semanticColors.status.neutral.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.neutral.dark,\n },\n },\n\n // Error state\n [`&.${chipClasses.colorError}`]: {\n backgroundColor: semanticColors.status.error.light,\n color: semanticColors.status.error.dark,\n border: `1px solid ${semanticColors.status.error.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.error.dark,\n },\n },\n\n // Warning state\n [`&.${chipClasses.colorWarning}`]: {\n backgroundColor: semanticColors.status.warning.light,\n color: semanticColors.status.warning.dark,\n border: `1px solid ${semanticColors.status.warning.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.warning.dark,\n },\n },\n\n // Success state\n [`&.${chipClasses.colorSuccess}`]: {\n backgroundColor: semanticColors.status.success.light,\n color: semanticColors.status.success.dark,\n border: `1px solid ${semanticColors.status.success.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.success.dark,\n },\n },\n\n // Info state\n [`&.${chipClasses.colorInfo}`]: {\n backgroundColor: semanticColors.status.info.light,\n color: semanticColors.status.info.dark,\n border: `1px solid ${semanticColors.status.info.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.info.dark,\n },\n },\n}))\n\nexport interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {\n /**\n * The color/state of the badge\n * @default \"default\"\n */\n color?: 'default' | 'error' | 'warning' | 'success' | 'info'\n}\n\n/**\n * NeoBadge - Status badge component based on MUI Chip\n *\n * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230\n *\n * Figma Props Mapping:\n * - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)\n * - iconLeading → icon prop (pass React element)\n * - iconTrailing → deleteIcon prop (pass React element)\n * - Label → label prop\n */\nexport const NeoBadge = (props: NeoBadgeProps) => {\n return <StyledChip {...props} />\n}\n\nNeoBadge.displayName = 'NeoBadge'\n\nexport default NeoBadge\n","/**\n * @moderneinc/neo-styled-components\n *\n * Styled MUI components using Moderne design tokens\n */\n\nexport const version = '0.0.0-development'\n\n// Components\nexport { NeoBadge } from './Badge'\n"],"names":["_jsxDEV"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,103 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var jsxDevRuntime = require('react/jsx-dev-runtime');
|
|
4
|
+
var neoDesign = require('@moderneinc/neo-design');
|
|
5
|
+
var Chip = require('@mui/material/Chip');
|
|
6
|
+
var styles = require('@mui/material/styles');
|
|
7
|
+
|
|
8
|
+
const _jsxFileName = "/home/runner/work/neo-design/neo-design/packages/styled-components/src/Badge.tsx";
|
|
9
|
+
const StyledChip = styles.styled(Chip)(({ theme }) => ({
|
|
10
|
+
height: 24,
|
|
11
|
+
padding: `${neoDesign.spacing.spacing_1_4}px ${neoDesign.spacing.spacing_1}px`,
|
|
12
|
+
borderRadius: neoDesign.borderRadius.full,
|
|
13
|
+
fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
|
|
14
|
+
lineHeight: 1,
|
|
15
|
+
gap: neoDesign.spacing.spacing_1_2,
|
|
16
|
+
overflow: 'visible',
|
|
17
|
+
[`& .${Chip.chipClasses.label}`]: {
|
|
18
|
+
padding: 0,
|
|
19
|
+
overflow: 'visible',
|
|
20
|
+
},
|
|
21
|
+
[`& .${Chip.chipClasses.icon}`]: {
|
|
22
|
+
margin: 0,
|
|
23
|
+
width: 12,
|
|
24
|
+
height: 12,
|
|
25
|
+
},
|
|
26
|
+
[`& .${Chip.chipClasses.deleteIcon}`]: {
|
|
27
|
+
margin: 0,
|
|
28
|
+
width: 12,
|
|
29
|
+
height: 12,
|
|
30
|
+
},
|
|
31
|
+
// Default (Neutral) state
|
|
32
|
+
[`&.${Chip.chipClasses.colorDefault}`]: {
|
|
33
|
+
backgroundColor: neoDesign.semanticColors.status.neutral.light,
|
|
34
|
+
color: neoDesign.semanticColors.status.neutral.dark,
|
|
35
|
+
border: `1px solid ${neoDesign.semanticColors.status.neutral.medium}80`,
|
|
36
|
+
[`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
|
|
37
|
+
color: neoDesign.semanticColors.status.neutral.dark,
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
// Error state
|
|
41
|
+
[`&.${Chip.chipClasses.colorError}`]: {
|
|
42
|
+
backgroundColor: neoDesign.semanticColors.status.error.light,
|
|
43
|
+
color: neoDesign.semanticColors.status.error.dark,
|
|
44
|
+
border: `1px solid ${neoDesign.semanticColors.status.error.medium}80`,
|
|
45
|
+
[`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
|
|
46
|
+
color: neoDesign.semanticColors.status.error.dark,
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
// Warning state
|
|
50
|
+
[`&.${Chip.chipClasses.colorWarning}`]: {
|
|
51
|
+
backgroundColor: neoDesign.semanticColors.status.warning.light,
|
|
52
|
+
color: neoDesign.semanticColors.status.warning.dark,
|
|
53
|
+
border: `1px solid ${neoDesign.semanticColors.status.warning.medium}80`,
|
|
54
|
+
[`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
|
|
55
|
+
color: neoDesign.semanticColors.status.warning.dark,
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
// Success state
|
|
59
|
+
[`&.${Chip.chipClasses.colorSuccess}`]: {
|
|
60
|
+
backgroundColor: neoDesign.semanticColors.status.success.light,
|
|
61
|
+
color: neoDesign.semanticColors.status.success.dark,
|
|
62
|
+
border: `1px solid ${neoDesign.semanticColors.status.success.medium}80`,
|
|
63
|
+
[`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
|
|
64
|
+
color: neoDesign.semanticColors.status.success.dark,
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
// Info state
|
|
68
|
+
[`&.${Chip.chipClasses.colorInfo}`]: {
|
|
69
|
+
backgroundColor: neoDesign.semanticColors.status.info.light,
|
|
70
|
+
color: neoDesign.semanticColors.status.info.dark,
|
|
71
|
+
border: `1px solid ${neoDesign.semanticColors.status.info.medium}80`,
|
|
72
|
+
[`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
|
|
73
|
+
color: neoDesign.semanticColors.status.info.dark,
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
}));
|
|
77
|
+
/**
|
|
78
|
+
* NeoBadge - Status badge component based on MUI Chip
|
|
79
|
+
*
|
|
80
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
|
|
81
|
+
*
|
|
82
|
+
* Figma Props Mapping:
|
|
83
|
+
* - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
|
|
84
|
+
* - iconLeading → icon prop (pass React element)
|
|
85
|
+
* - iconTrailing → deleteIcon prop (pass React element)
|
|
86
|
+
* - Label → label prop
|
|
87
|
+
*/
|
|
88
|
+
const NeoBadge = (props) => {
|
|
89
|
+
return jsxDevRuntime.jsxDEV(StyledChip, { ...props }, void 0, false, { fileName: _jsxFileName, lineNumber: 107, columnNumber: 9 }, undefined);
|
|
90
|
+
};
|
|
91
|
+
NeoBadge.displayName = 'NeoBadge';
|
|
92
|
+
|
|
3
93
|
/**
|
|
4
94
|
* @moderneinc/neo-styled-components
|
|
5
95
|
*
|
|
6
96
|
* Styled MUI components using Moderne design tokens
|
|
7
97
|
*/
|
|
8
98
|
|
|
9
|
-
// Placeholder - components will be added here
|
|
10
99
|
const version = '0.0.0-development';
|
|
11
100
|
|
|
101
|
+
exports.NeoBadge = NeoBadge;
|
|
12
102
|
exports.version = version;
|
|
13
103
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["/**\n * @moderneinc/neo-styled-components\n *\n * Styled MUI components using Moderne design tokens\n */\n\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/Badge.tsx","../src/index.js"],"sourcesContent":["import { borderRadius, semanticColors, spacing, typography } from '@moderneinc/neo-design'\nimport Chip, { type ChipProps, chipClasses } from '@mui/material/Chip'\nimport { styled } from '@mui/material/styles'\n\nconst StyledChip = styled(Chip)(({ theme }) => ({\n height: 24,\n padding: `${spacing.spacing_1_4}px ${spacing.spacing_1}px`,\n borderRadius: borderRadius.full,\n fontSize: theme.typography.pxToRem(typography.fontSize.xs),\n lineHeight: 1,\n gap: spacing.spacing_1_2,\n overflow: 'visible',\n\n [`& .${chipClasses.label}`]: {\n padding: 0,\n overflow: 'visible',\n },\n\n [`& .${chipClasses.icon}`]: {\n margin: 0,\n width: 12,\n height: 12,\n },\n\n [`& .${chipClasses.deleteIcon}`]: {\n margin: 0,\n width: 12,\n height: 12,\n },\n\n // Default (Neutral) state\n [`&.${chipClasses.colorDefault}`]: {\n backgroundColor: semanticColors.status.neutral.light,\n color: semanticColors.status.neutral.dark,\n border: `1px solid ${semanticColors.status.neutral.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.neutral.dark,\n },\n },\n\n // Error state\n [`&.${chipClasses.colorError}`]: {\n backgroundColor: semanticColors.status.error.light,\n color: semanticColors.status.error.dark,\n border: `1px solid ${semanticColors.status.error.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.error.dark,\n },\n },\n\n // Warning state\n [`&.${chipClasses.colorWarning}`]: {\n backgroundColor: semanticColors.status.warning.light,\n color: semanticColors.status.warning.dark,\n border: `1px solid ${semanticColors.status.warning.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.warning.dark,\n },\n },\n\n // Success state\n [`&.${chipClasses.colorSuccess}`]: {\n backgroundColor: semanticColors.status.success.light,\n color: semanticColors.status.success.dark,\n border: `1px solid ${semanticColors.status.success.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.success.dark,\n },\n },\n\n // Info state\n [`&.${chipClasses.colorInfo}`]: {\n backgroundColor: semanticColors.status.info.light,\n color: semanticColors.status.info.dark,\n border: `1px solid ${semanticColors.status.info.medium}80`,\n\n [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {\n color: semanticColors.status.info.dark,\n },\n },\n}))\n\nexport interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {\n /**\n * The color/state of the badge\n * @default \"default\"\n */\n color?: 'default' | 'error' | 'warning' | 'success' | 'info'\n}\n\n/**\n * NeoBadge - Status badge component based on MUI Chip\n *\n * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230\n *\n * Figma Props Mapping:\n * - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)\n * - iconLeading → icon prop (pass React element)\n * - iconTrailing → deleteIcon prop (pass React element)\n * - Label → label prop\n */\nexport const NeoBadge = (props: NeoBadgeProps) => {\n return <StyledChip {...props} />\n}\n\nNeoBadge.displayName = 'NeoBadge'\n\nexport default NeoBadge\n","/**\n * @moderneinc/neo-styled-components\n *\n * Styled MUI components using Moderne design tokens\n */\n\nexport const version = '0.0.0-development'\n\n// Components\nexport { NeoBadge } from './Badge'\n"],"names":["styled","spacing","borderRadius","typography","chipClasses","semanticColors","_jsxDEV"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moderneinc/neo-styled-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.6.1-next.1d880f",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Styled MUI components for Moderne applications",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -19,10 +19,13 @@
|
|
|
19
19
|
"scripts": {
|
|
20
20
|
"clean": "rm -rf dist/*",
|
|
21
21
|
"prebuild": "npm run clean",
|
|
22
|
-
"build": "mkdir -p dist &&
|
|
23
|
-
"postbuild": "rm -f dist/temp-index.d.ts",
|
|
22
|
+
"build": "mkdir -p dist && rollup -c",
|
|
24
23
|
"test": "vitest",
|
|
25
|
-
"test:run": "vitest run"
|
|
24
|
+
"test:run": "vitest run",
|
|
25
|
+
"format": "biome format --write src",
|
|
26
|
+
"lint": "biome check src",
|
|
27
|
+
"lint:fix": "biome check --write src",
|
|
28
|
+
"check:all": "npm run format && npm run lint:fix"
|
|
26
29
|
},
|
|
27
30
|
"keywords": [
|
|
28
31
|
"design-system",
|
|
@@ -46,6 +49,8 @@
|
|
|
46
49
|
"react": "^18.0.0 || ^19.0.0"
|
|
47
50
|
},
|
|
48
51
|
"devDependencies": {
|
|
52
|
+
"@rollup/plugin-node-resolve": "16.0.3",
|
|
53
|
+
"@rollup/plugin-typescript": "12.3.0",
|
|
49
54
|
"@semantic-release/commit-analyzer": "13.0.1",
|
|
50
55
|
"@semantic-release/github": "11.0.6",
|
|
51
56
|
"@semantic-release/npm": "12.0.2",
|
|
@@ -56,6 +61,7 @@
|
|
|
56
61
|
"rollup": "4.52.0",
|
|
57
62
|
"rollup-plugin-dts": "6.2.3",
|
|
58
63
|
"semantic-release": "24.2.9",
|
|
64
|
+
"tslib": "2.8.1",
|
|
59
65
|
"typescript": "5.9.2"
|
|
60
66
|
}
|
|
61
67
|
}
|