@remember-web/primitive 0.2.9 → 0.2.11
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 +2 -1
- package/dist/src/Chips/Chip/const.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/const.d.ts.map +1 -1
- package/dist/src/Chips/Chip/const.esm.js +2 -1
- 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.d.ts.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/package.json +2 -2
- package/src/Chips/Chip/const.ts +1 -0
- package/src/Chips/Chip/styles.ts +1 -2
|
@@ -67,7 +67,8 @@ var CHIP_VARIANT_STYLE = {
|
|
|
67
67
|
backgroundColor: mixin.primary100,
|
|
68
68
|
color: mixin.contents999,
|
|
69
69
|
leftIconColor: mixin.contents999,
|
|
70
|
-
deleteButtonColor: mixin.contents999
|
|
70
|
+
deleteButtonColor: mixin.contents999,
|
|
71
|
+
border: '1px solid transparent'
|
|
71
72
|
}
|
|
72
73
|
},
|
|
73
74
|
dashedLine: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\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\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\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 },\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 },\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: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: `1px solid ${primary100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","outline","bg100","border","concat","dashedLine"],"mappings":";;;;AAaO,IAAMA,eAAe,GAAG;AAC7BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,UAAU;AACtBC,IAAAA,OAAO,EAAE,UAAU;AACnBC,IAAAA,MAAM,EAAE,MAAA;GACT;AACDC,EAAAA,MAAM,EAAE;AACNH,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,OAAO,EAAE,UAAU;AACnBC,IAAAA,MAAM,EAAE,MAAA;AACV,GAAA;AACF,EAA8C;AAEvC,IAAME,kBAAuC,GAAG;AACrDC,EAAAA,MAAM,EAAE;IACN,SAAS,EAAA;AACPC,MAAAA,eAAe,EAAEC,WAAK;AACtBC,MAAAA,KAAK,EAAEC,iBAAW;AAClBC,MAAAA,aAAa,EAAED,iBAAW;AAC1BE,MAAAA,iBAAiB,EAAEC,iBAAAA;KACpB;AACDC,IAAAA,KAAK,EAAE;AACLP,MAAAA,eAAe,EAAEC,WAAK;AACtBC,MAAAA,KAAK,EAAEM,iBAAW;AAClBJ,MAAAA,aAAa,EAAEI,iBAAW;AAC1BH,MAAAA,iBAAiB,EAAEF,iBAAAA;KACpB;AACDM,IAAAA,QAAQ,EAAE;AACRT,MAAAA,eAAe,EAAEU,WAAK;AACtBR,MAAAA,KAAK,EAAES,iBAAW;AAClBP,MAAAA,aAAa,EAAEO,iBAAW;AAC1BN,MAAAA,iBAAiB,EAAEM,iBAAAA;KACpB;AACDC,IAAAA,QAAQ,EAAE;AACRZ,MAAAA,eAAe,EAAEa,gBAAU;AAC3BX,MAAAA,KAAK,EAAEY,iBAAW;AAClBV,MAAAA,aAAa,EAAEU,iBAAW;AAC1BT,MAAAA,iBAAiB,EAAES,iBAAAA;AACrB,KAAA;GACD;AAEDC,EAAAA,OAAO,EAAE;IACP,SAAS,EAAA;AACPf,MAAAA,eAAe,EAAEgB,WAAK;AACtBd,MAAAA,KAAK,EAAEC,iBAAW;AAClBC,MAAAA,aAAa,EAAED,iBAAW;AAC1BE,MAAAA,iBAAiB,EAAEC,iBAAW;MAC9BW,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAef,iBAAW,CAAA;KACjC;AACDI,IAAAA,KAAK,EAAE;AACLP,MAAAA,eAAe,EAAEgB,WAAK;AACtBd,MAAAA,KAAK,EAAEM,iBAAW;AAClBJ,MAAAA,aAAa,EAAEI,iBAAW;AAC1BH,MAAAA,iBAAiB,EAAEF,iBAAW;MAC9Bc,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeV,iBAAW,CAAA;KACjC;AACDC,IAAAA,QAAQ,EAAE;AACRT,MAAAA,eAAe,EAAEgB,WAAK;AACtBd,MAAAA,KAAK,EAAEI,iBAAW;AAClBF,MAAAA,aAAa,EAAEE,iBAAW;AAC1BD,MAAAA,iBAAiB,EAAEC,iBAAW;MAC9BW,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeZ,iBAAW,CAAA;KACjC;AACDM,IAAAA,QAAQ,EAAE;AACRZ,MAAAA,eAAe,EAAEa,gBAAU;AAC3BX,MAAAA,KAAK,EAAEY,iBAAW;AAClBV,MAAAA,aAAa,EAAEU,iBAAW;AAC1BT,MAAAA,iBAAiB,EAAES,
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\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\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\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 },\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 },\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: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: `1px solid ${primary100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","outline","bg100","border","concat","dashedLine"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAyB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE1E,eAAO,MAAM,eAAe;;;;;;;;;;;CAWkB,CAAC;AAE/C,eAAO,MAAM,kBAAkB,EAAE,
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAyB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE1E,eAAO,MAAM,eAAe;;;;;;;;;;;CAWkB,CAAC;AAE/C,eAAO,MAAM,kBAAkB,EAAE,mBAyFgB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\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\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\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 },\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 },\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: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: `1px solid ${primary100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","outline","bg100","border","concat","dashedLine"],"mappings":";;AAaO,IAAMA,eAAe,GAAG;AAC7BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,UAAU;AACtBC,IAAAA,OAAO,EAAE,UAAU;AACnBC,IAAAA,MAAM,EAAE,MAAA;GACT;AACDC,EAAAA,MAAM,EAAE;AACNH,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,OAAO,EAAE,UAAU;AACnBC,IAAAA,MAAM,EAAE,MAAA;AACV,GAAA;AACF,EAA8C;AAEvC,IAAME,kBAAuC,GAAG;AACrDC,EAAAA,MAAM,EAAE;IACN,SAAS,EAAA;AACPC,MAAAA,eAAe,EAAEC,KAAK;AACtBC,MAAAA,KAAK,EAAEC,WAAW;AAClBC,MAAAA,aAAa,EAAED,WAAW;AAC1BE,MAAAA,iBAAiB,EAAEC,WAAAA;KACpB;AACDC,IAAAA,KAAK,EAAE;AACLP,MAAAA,eAAe,EAAEC,KAAK;AACtBC,MAAAA,KAAK,EAAEM,WAAW;AAClBJ,MAAAA,aAAa,EAAEI,WAAW;AAC1BH,MAAAA,iBAAiB,EAAEF,WAAAA;KACpB;AACDM,IAAAA,QAAQ,EAAE;AACRT,MAAAA,eAAe,EAAEU,KAAK;AACtBR,MAAAA,KAAK,EAAES,WAAW;AAClBP,MAAAA,aAAa,EAAEO,WAAW;AAC1BN,MAAAA,iBAAiB,EAAEM,WAAAA;KACpB;AACDC,IAAAA,QAAQ,EAAE;AACRZ,MAAAA,eAAe,EAAEa,UAAU;AAC3BX,MAAAA,KAAK,EAAEY,WAAW;AAClBV,MAAAA,aAAa,EAAEU,WAAW;AAC1BT,MAAAA,iBAAiB,EAAES,WAAAA;AACrB,KAAA;GACD;AAEDC,EAAAA,OAAO,EAAE;IACP,SAAS,EAAA;AACPf,MAAAA,eAAe,EAAEgB,KAAK;AACtBd,MAAAA,KAAK,EAAEC,WAAW;AAClBC,MAAAA,aAAa,EAAED,WAAW;AAC1BE,MAAAA,iBAAiB,EAAEC,WAAW;MAC9BW,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAef,WAAW,CAAA;KACjC;AACDI,IAAAA,KAAK,EAAE;AACLP,MAAAA,eAAe,EAAEgB,KAAK;AACtBd,MAAAA,KAAK,EAAEM,WAAW;AAClBJ,MAAAA,aAAa,EAAEI,WAAW;AAC1BH,MAAAA,iBAAiB,EAAEF,WAAW;MAC9Bc,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeV,WAAW,CAAA;KACjC;AACDC,IAAAA,QAAQ,EAAE;AACRT,MAAAA,eAAe,EAAEgB,KAAK;AACtBd,MAAAA,KAAK,EAAEI,WAAW;AAClBF,MAAAA,aAAa,EAAEE,WAAW;AAC1BD,MAAAA,iBAAiB,EAAEC,WAAW;MAC9BW,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeZ,WAAW,CAAA;KACjC;AACDM,IAAAA,QAAQ,EAAE;AACRZ,MAAAA,eAAe,EAAEa,UAAU;AAC3BX,MAAAA,KAAK,EAAEY,WAAW;AAClBV,MAAAA,aAAa,EAAEU,WAAW;AAC1BT,MAAAA,iBAAiB,EAAES,
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\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\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\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 },\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 },\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: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: `1px solid ${primary100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","outline","bg100","border","concat","dashedLine"],"mappings":"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"}
|
|
@@ -26,7 +26,7 @@ var getVariantStyles = function getVariantStyles(props) {
|
|
|
26
26
|
var getStateStyle = function getStateStyle(state) {
|
|
27
27
|
return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n color: ", ";\n border: ", ";\n --left-icon-color: ", ";\n --delete-button-color: ", ";\n "])), _const.CHIP_VARIANT_STYLE[$variant][state].backgroundColor, _const.CHIP_VARIANT_STYLE[$variant][state].color, _const.CHIP_VARIANT_STYLE[$variant][state].border || 'none', _const.CHIP_VARIANT_STYLE[$variant][state].leftIconColor, _const.CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
|
|
28
28
|
};
|
|
29
|
-
return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\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 "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", "
|
|
29
|
+
return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\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 "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", " \n }\n "])), getStateStyle('hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
|
|
30
30
|
};
|
|
31
31
|
var StyledChip = styled__default.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n ", "\n"])), function (_ref) {
|
|
32
32
|
var $size = _ref.$size,
|
|
@@ -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('hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')}
|
|
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('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: center;\n transition: all 0.2s ease-in;\n\n height: ${CHIP_SIZE_STYLE[$size].height};\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","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,SAAS,CAAC;AA2CzD,eAAO,MAAM,UAAU,2NAwBtB,CAAC;AAEF,eAAO,MAAM,aAAa,4NAMvB,CAAC"}
|
|
@@ -17,7 +17,7 @@ var getVariantStyles = function getVariantStyles(props) {
|
|
|
17
17
|
var getStateStyle = function getStateStyle(state) {
|
|
18
18
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n border: ", ";\n --left-icon-color: ", ";\n --delete-button-color: ", ";\n "])), CHIP_VARIANT_STYLE[$variant][state].backgroundColor, CHIP_VARIANT_STYLE[$variant][state].color, CHIP_VARIANT_STYLE[$variant][state].border || 'none', CHIP_VARIANT_STYLE[$variant][state].leftIconColor, CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
|
|
19
19
|
};
|
|
20
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\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 "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", "
|
|
20
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\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 "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", " \n }\n "])), getStateStyle('hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
|
|
21
21
|
};
|
|
22
22
|
var StyledChip = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref) {
|
|
23
23
|
var $size = _ref.$size,
|
|
@@ -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('hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')}
|
|
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('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: center;\n transition: all 0.2s ease-in;\n\n height: ${CHIP_SIZE_STYLE[$size].height};\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","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remember-web/primitive",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.11",
|
|
4
4
|
"description": "Remember Web Primitive Components",
|
|
5
5
|
"homepage": "https://dramancompany.github.io/remember-web-packages/",
|
|
6
6
|
"author": "Remember",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@radix-ui/react-switch": "^1.0.3",
|
|
43
43
|
"@radix-ui/react-tooltip": "^1.0.7",
|
|
44
44
|
"@remember-web/icon": "^0.1.12",
|
|
45
|
-
"@remember-web/mixin": "^0.2.
|
|
45
|
+
"@remember-web/mixin": "^0.2.6",
|
|
46
46
|
"@remember-web/shared": "^0.1.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
package/src/Chips/Chip/const.ts
CHANGED
package/src/Chips/Chip/styles.ts
CHANGED
|
@@ -24,8 +24,7 @@ const getVariantStyles = (props: Partial<ChipStyleProps>) => {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
${$selected ? '&' : '&:active'}:not([data-chip-disabled="true"]) {
|
|
27
|
-
${getStateStyle('selected')}
|
|
28
|
-
${$variant === 'outline' && 'border: none;'}
|
|
27
|
+
${getStateStyle('selected')}
|
|
29
28
|
}
|
|
30
29
|
`
|
|
31
30
|
}
|