@remember-web/primitive 0.3.1 → 0.3.2
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/src/Chips/Chip/const.cjs.js +26 -6
- package/dist/src/Chips/Chip/const.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/const.d.ts +7 -7
- package/dist/src/Chips/Chip/const.d.ts.map +1 -1
- package/dist/src/Chips/Chip/const.esm.js +26 -6
- package/dist/src/Chips/Chip/const.esm.js.map +1 -1
- package/dist/src/Chips/Chip/styles.cjs.js +1 -1
- package/dist/src/Chips/Chip/styles.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/styles.esm.js +1 -1
- package/dist/src/Chips/Chip/styles.esm.js.map +1 -1
- package/dist/src/Chips/Chip/types.d.ts +6 -0
- package/dist/src/Chips/Chip/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Chips/Chip/const.ts +34 -8
- package/src/Chips/Chip/styles.ts +2 -2
- package/src/Chips/Chip/types.ts +7 -0
|
@@ -2,16 +2,36 @@
|
|
|
2
2
|
|
|
3
3
|
var mixin = require('@remember-web/mixin');
|
|
4
4
|
|
|
5
|
+
var SMALL_WITH_BORDER_CHIP_SIZE_STYE = {
|
|
6
|
+
typography: 'Caption1',
|
|
7
|
+
padding: '6px 10px',
|
|
8
|
+
height: '28px'
|
|
9
|
+
};
|
|
10
|
+
var SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
11
|
+
typography: 'Caption1',
|
|
12
|
+
padding: '7px 11px',
|
|
13
|
+
height: '28px'
|
|
14
|
+
};
|
|
15
|
+
var MEDIUM_WITH_BORDER_CHIP_SIZE_STYE = {
|
|
16
|
+
typography: 'UIBody3',
|
|
17
|
+
padding: '5px 12px',
|
|
18
|
+
height: '30px'
|
|
19
|
+
};
|
|
20
|
+
var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
21
|
+
typography: 'UIBody3',
|
|
22
|
+
padding: '6px 14px',
|
|
23
|
+
height: '30px'
|
|
24
|
+
};
|
|
5
25
|
var CHIP_SIZE_STYLE = {
|
|
6
26
|
small: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
27
|
+
filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
28
|
+
outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
|
|
29
|
+
dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE
|
|
10
30
|
},
|
|
11
31
|
medium: {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
32
|
+
filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
33
|
+
outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
34
|
+
dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
|
|
15
35
|
}
|
|
16
36
|
};
|
|
17
37
|
var CHIP_VARIANT_STYLE = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import type { ChipVariantStyleMap } from './types';
|
|
1
|
+
import type { ChipSizeStyle, ChipVariantStyleMap } from './types';
|
|
2
2
|
export declare const CHIP_SIZE_STYLE: {
|
|
3
3
|
readonly small: {
|
|
4
|
-
readonly
|
|
5
|
-
readonly
|
|
6
|
-
readonly
|
|
4
|
+
readonly filled: ChipSizeStyle;
|
|
5
|
+
readonly outline: ChipSizeStyle;
|
|
6
|
+
readonly dashedLine: ChipSizeStyle;
|
|
7
7
|
};
|
|
8
8
|
readonly medium: {
|
|
9
|
-
readonly
|
|
10
|
-
readonly
|
|
11
|
-
readonly
|
|
9
|
+
readonly filled: ChipSizeStyle;
|
|
10
|
+
readonly outline: ChipSizeStyle;
|
|
11
|
+
readonly dashedLine: ChipSizeStyle;
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
export declare const CHIP_VARIANT_STYLE: ChipVariantStyleMap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAY,aAAa,EAAe,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA4BzF,eAAO,MAAM,eAAe;;;;;;;;;;;CAW6C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,EAAE,mBA6GgB,CAAC"}
|
|
@@ -1,15 +1,35 @@
|
|
|
1
1
|
import { bg200, contents150, contents200, contents100, bg300, contents300, primary100, contents999, bg100, contents000 } from '@remember-web/mixin';
|
|
2
2
|
|
|
3
|
+
var SMALL_WITH_BORDER_CHIP_SIZE_STYE = {
|
|
4
|
+
typography: 'Caption1',
|
|
5
|
+
padding: '6px 10px',
|
|
6
|
+
height: '28px'
|
|
7
|
+
};
|
|
8
|
+
var SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
9
|
+
typography: 'Caption1',
|
|
10
|
+
padding: '7px 11px',
|
|
11
|
+
height: '28px'
|
|
12
|
+
};
|
|
13
|
+
var MEDIUM_WITH_BORDER_CHIP_SIZE_STYE = {
|
|
14
|
+
typography: 'UIBody3',
|
|
15
|
+
padding: '5px 12px',
|
|
16
|
+
height: '30px'
|
|
17
|
+
};
|
|
18
|
+
var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
|
|
19
|
+
typography: 'UIBody3',
|
|
20
|
+
padding: '6px 14px',
|
|
21
|
+
height: '30px'
|
|
22
|
+
};
|
|
3
23
|
var CHIP_SIZE_STYLE = {
|
|
4
24
|
small: {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
25
|
+
filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
26
|
+
outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
|
|
27
|
+
dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE
|
|
8
28
|
},
|
|
9
29
|
medium: {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
30
|
+
filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
31
|
+
outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
32
|
+
dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
|
|
13
33
|
}
|
|
14
34
|
};
|
|
15
35
|
var CHIP_VARIANT_STYLE = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '6px 10px',\n height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'Caption1',\n padding: '7px 11px',\n height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '5px 12px',\n height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n typography: 'UIBody3',\n padding: '6px 14px',\n height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n },\n medium: {\n filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}
|
|
@@ -34,7 +34,7 @@ var StyledChip = styled__default.default.div(_templateObject4 || (_templateObjec
|
|
|
34
34
|
_ref$$clickable = _ref.$clickable,
|
|
35
35
|
$clickable = _ref$$clickable === void 0 ? false : _ref$$clickable,
|
|
36
36
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
37
|
-
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n box-sizing: border-box;\n user-select: none;\n cursor: ", ";\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ", ";\n\n ", "\n \n ", "\n "])), $clickable ? 'pointer' : 'default', _const.CHIP_SIZE_STYLE[$size].padding, mixin.getTypographyStyles(_const.CHIP_SIZE_STYLE[$size].typography), getVariantStyles(_objectSpread({
|
|
37
|
+
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n box-sizing: border-box;\n user-select: none;\n cursor: ", ";\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ", ";\n\n ", "\n \n ", "\n "])), $clickable ? 'pointer' : 'default', _const.CHIP_SIZE_STYLE[$size][$variant].padding, mixin.getTypographyStyles(_const.CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
|
|
38
38
|
$variant: $variant,
|
|
39
39
|
$clickable: $clickable
|
|
40
40
|
}, props)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n \n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAA8B,EAAK;AAC3D,EAAA,IAAAC,eAAA,GAAuDD,KAAK,CAApDE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;IAAEE,SAAS,GAAiBH,KAAK,CAA/BG,SAAS;IAAEC,UAAU,GAAKJ,KAAK,CAApBI,UAAU,CAAA;AAClD,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAgB,EAAA;IAAA,OAAKC,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CACzBC,CAAAA,0BAAAA,EAAAA,gBAAAA,EAAAA,iBAAAA,EAAAA,4BAAAA,EAAAA,gCAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACK,eAAe,EAC9DD,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACM,KAAK,EACxCF,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACO,MAAM,IAAI,MAAM,EACzCH,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACQ,aAAa,EAC7CJ,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACS,iBAAiB,CAAA,CAAA;GAC/E,CAAA;EAED,OAAOR,UAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,uCAAA,sQACNJ,aAAa,CAAC,SAAS,CAAC,EAGxBD,UAAU,IACVG,UAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,uCAAA,CAAA,CAAA,8DAAA,EAAA,qBAAA,EAAA,iDAAA,EAAA,oBAAA,CAAA,CAAA,CAAA,EAECJ,aAAa,CAACF,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC,EAGtDA,SAAS,GAAG,GAAG,GAAG,UAAU,EAC1BE,aAAa,CAAC,UAAU,CAAC,CAE5B,EAICA,aAAa,CAAC,UAAU,CAAC,CAAA,CAAA;AAYjC,CAAC,CAAA;AAEYa,IAAAA,UAAU,GAAGC,uBAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAZ,uCAAA,CAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAChC,UAAAa,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAErB,QAAQ,GAAAoB,IAAA,CAARpB,QAAQ;IAAAsB,eAAA,GAAAF,IAAA,CAAElB,UAAU;AAAVA,IAAAA,UAAU,GAAAoB,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;AAAKxB,IAAAA,KAAK,GAAAyB,yCAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAAA,EAAA,OAAOnB,UAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,uCAAA,
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography)}\n \n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ var StyledChip = styled.div(_templateObject4 || (_templateObject4 = _taggedTempl
|
|
|
25
25
|
_ref$$clickable = _ref.$clickable,
|
|
26
26
|
$clickable = _ref$$clickable === void 0 ? false : _ref$$clickable,
|
|
27
27
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
-
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n user-select: none;\n cursor: ", ";\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ", ";\n\n ", "\n \n ", "\n "])), $clickable ? 'pointer' : 'default', CHIP_SIZE_STYLE[$size].padding, getTypographyStyles(CHIP_SIZE_STYLE[$size].typography), getVariantStyles(_objectSpread({
|
|
28
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n user-select: none;\n cursor: ", ";\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ", ";\n\n ", "\n \n ", "\n "])), $clickable ? 'pointer' : 'default', CHIP_SIZE_STYLE[$size][$variant].padding, getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
|
|
29
29
|
$variant: $variant,
|
|
30
30
|
$clickable: $clickable
|
|
31
31
|
}, props)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n \n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":";;;;;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAA8B,EAAK;AAC3D,EAAA,IAAAC,eAAA,GAAuDD,KAAK,CAApDE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;IAAEE,SAAS,GAAiBH,KAAK,CAA/BG,SAAS;IAAEC,UAAU,GAAKJ,KAAK,CAApBI,UAAU,CAAA;AAClD,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAgB,EAAA;IAAA,OAAKC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CACzBC,CAAAA,0BAAAA,EAAAA,gBAAAA,EAAAA,iBAAAA,EAAAA,4BAAAA,EAAAA,gCAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,EAAAA,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACK,eAAe,EAC9DD,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACM,KAAK,EACxCF,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACO,MAAM,IAAI,MAAM,EACzCH,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACQ,aAAa,EAC7CJ,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACS,iBAAiB,CAAA,CAAA;GAC/E,CAAA;EAED,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,sQACNJ,aAAa,CAAC,SAAS,CAAC,EAGxBD,UAAU,IACVG,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,sBAAA,CAAA,CAAA,8DAAA,EAAA,qBAAA,EAAA,iDAAA,EAAA,oBAAA,CAAA,CAAA,CAAA,EAECJ,aAAa,CAACF,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC,EAGtDA,SAAS,GAAG,GAAG,GAAG,UAAU,EAC1BE,aAAa,CAAC,UAAU,CAAC,CAE5B,EAICA,aAAa,CAAC,UAAU,CAAC,CAAA,CAAA;AAYjC,CAAC,CAAA;AAEYa,IAAAA,UAAU,GAAGC,MAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAZ,sBAAA,CAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAChC,UAAAa,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAErB,QAAQ,GAAAoB,IAAA,CAARpB,QAAQ;IAAAsB,eAAA,GAAAF,IAAA,CAAElB,UAAU;AAAVA,IAAAA,UAAU,GAAAoB,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;AAAKxB,IAAAA,KAAK,GAAAyB,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAAA,EAAA,OAAOnB,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: left;\n transition: all 0.2s ease-in;\n height: auto; \n padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography)}\n \n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { TypographyStyle } from '@remember-web/mixin';
|
|
1
2
|
import type { ComponentProps } from 'react';
|
|
2
3
|
export type ChipSize = 'small' | 'medium';
|
|
3
4
|
export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
|
|
@@ -39,5 +40,10 @@ interface ChipStateStyle {
|
|
|
39
40
|
}
|
|
40
41
|
type ChipStateStyles = Record<ChipState, ChipStateStyle>;
|
|
41
42
|
export type ChipVariantStyleMap = Record<ChipVariant, ChipStateStyles>;
|
|
43
|
+
export interface ChipSizeStyle {
|
|
44
|
+
typography: TypographyStyle;
|
|
45
|
+
padding: string;
|
|
46
|
+
height: string;
|
|
47
|
+
}
|
|
42
48
|
export {};
|
|
43
49
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,eAAe,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB"}
|
package/package.json
CHANGED
package/src/Chips/Chip/const.ts
CHANGED
|
@@ -10,20 +10,46 @@ import {
|
|
|
10
10
|
contents999,
|
|
11
11
|
primary100,
|
|
12
12
|
} from '@remember-web/mixin';
|
|
13
|
-
import type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';
|
|
13
|
+
import type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
const SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
|
|
18
|
+
typography: 'Caption1',
|
|
19
|
+
padding: '6px 10px',
|
|
20
|
+
height: '28px',
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
|
|
24
|
+
typography: 'Caption1',
|
|
25
|
+
padding: '7px 11px',
|
|
26
|
+
height: '28px',
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
|
|
30
|
+
typography: 'UIBody3',
|
|
31
|
+
padding: '5px 12px',
|
|
32
|
+
height: '30px',
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
|
|
36
|
+
typography: 'UIBody3',
|
|
37
|
+
padding: '6px 14px',
|
|
38
|
+
height: '30px',
|
|
39
|
+
};
|
|
14
40
|
|
|
15
41
|
export const CHIP_SIZE_STYLE = {
|
|
16
42
|
small: {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
43
|
+
filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
44
|
+
outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
|
|
45
|
+
dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
|
|
20
46
|
},
|
|
21
47
|
medium: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
48
|
+
filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
|
|
49
|
+
outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
50
|
+
dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
|
|
25
51
|
},
|
|
26
|
-
} as const satisfies Record<ChipSize,
|
|
52
|
+
} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;
|
|
27
53
|
|
|
28
54
|
export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
|
|
29
55
|
filled: {
|
package/src/Chips/Chip/styles.ts
CHANGED
|
@@ -61,9 +61,9 @@ export const StyledChip = styled.div<ChipStyleProps>`
|
|
|
61
61
|
text-align: left;
|
|
62
62
|
transition: all 0.2s ease-in;
|
|
63
63
|
height: auto;
|
|
64
|
-
padding: ${CHIP_SIZE_STYLE[$size].padding};
|
|
64
|
+
padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};
|
|
65
65
|
|
|
66
|
-
${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}
|
|
66
|
+
${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography)}
|
|
67
67
|
|
|
68
68
|
${getVariantStyles({ $variant, $clickable, ...props })}
|
|
69
69
|
`}
|
package/src/Chips/Chip/types.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { TypographyStyle } from '@remember-web/mixin';
|
|
1
2
|
import type { ComponentProps } from 'react';
|
|
2
3
|
|
|
3
4
|
// Props types -------------------------------------------------------
|
|
@@ -64,3 +65,9 @@ interface ChipStateStyle {
|
|
|
64
65
|
type ChipStateStyles = Record<ChipState, ChipStateStyle>;
|
|
65
66
|
|
|
66
67
|
export type ChipVariantStyleMap = Record<ChipVariant, ChipStateStyles>;
|
|
68
|
+
|
|
69
|
+
export interface ChipSizeStyle {
|
|
70
|
+
typography: TypographyStyle;
|
|
71
|
+
padding: string;
|
|
72
|
+
height: string;
|
|
73
|
+
}
|