@xfers/design-system 4.4.3-dev.f2ac945e49 → 4.4.4-dev.9d2be77118

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xfers/design-system",
3
- "version": "4.4.3-dev.f2ac945e49",
3
+ "version": "4.4.4-dev.9d2be77118",
4
4
  "description": "StraitsX design system",
5
5
  "keywords": [
6
6
  "xfers",
@@ -1,79 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.REMOVABLE_TAG_COLORS = exports.FILLED_TAG_COLORS = exports.OUTLINED_TAG_COLORS = exports.ICON_MAP = void 0;
4
- var ColorStyles_1 = require("src/shared/ColorStyles");
5
- var theme_1 = require("src/theme/theme");
6
- exports.ICON_MAP = {
7
- positive: 'check',
8
- critical: 'cancel',
9
- warning: 'timer',
10
- info: 'info',
11
- neutral: 'timer',
12
- };
13
- exports.OUTLINED_TAG_COLORS = {
14
- positive: {
15
- base: theme_1.straitsXTheme.color.surface.subduePositive,
16
- text: theme_1.straitsXTheme.color.status.positive,
17
- icon: theme_1.straitsXTheme.color.status.positive,
18
- border: theme_1.straitsXTheme.color.status.positive,
19
- },
20
- critical: {
21
- base: theme_1.straitsXTheme.color.surface.subdueCritical,
22
- text: theme_1.straitsXTheme.color.status.critical,
23
- icon: theme_1.straitsXTheme.color.status.critical,
24
- border: theme_1.straitsXTheme.color.status.critical,
25
- },
26
- warning: {
27
- base: theme_1.straitsXTheme.color.surface.subdueWarning,
28
- text: theme_1.straitsXTheme.color.status.warning,
29
- icon: theme_1.straitsXTheme.color.status.warning,
30
- border: theme_1.straitsXTheme.color.status.warning,
31
- },
32
- info: {
33
- base: theme_1.straitsXTheme.color.surface.SubdueInfo,
34
- text: theme_1.straitsXTheme.color.status.info,
35
- icon: theme_1.straitsXTheme.color.status.info,
36
- border: theme_1.straitsXTheme.color.status.info,
37
- },
38
- neutral: {
39
- base: ColorStyles_1.NEUTRAL_COLORS.G100,
40
- text: theme_1.straitsXTheme.color.base.onNeutralSecondary,
41
- icon: theme_1.straitsXTheme.color.base.onNeutralSecondary,
42
- border: theme_1.straitsXTheme.color.base.line,
43
- },
44
- };
45
- exports.FILLED_TAG_COLORS = {
46
- positive: {
47
- base: theme_1.straitsXTheme.color.status.positive,
48
- text: theme_1.straitsXTheme.color.base.onContainer,
49
- icon: '',
50
- border: theme_1.straitsXTheme.color.status.positive,
51
- },
52
- neutral: {
53
- base: theme_1.straitsXTheme.color.surface.disabledSurface,
54
- text: theme_1.straitsXTheme.color.surface.disabledOnSurface,
55
- icon: '',
56
- border: theme_1.straitsXTheme.color.base.line,
57
- },
58
- };
59
- exports.REMOVABLE_TAG_COLORS = {
60
- positive: {
61
- base: theme_1.straitsXTheme.color.surface.subduePositive,
62
- text: theme_1.straitsXTheme.color.status.positive,
63
- icon: theme_1.straitsXTheme.color.status.positive,
64
- border: theme_1.straitsXTheme.color.status.positive,
65
- },
66
- disabled: {
67
- base: theme_1.straitsXTheme.color.surface.disabledSurface,
68
- text: theme_1.straitsXTheme.color.surface.disabledOnSurface,
69
- icon: theme_1.straitsXTheme.color.surface.disabledOnSurface,
70
- border: theme_1.straitsXTheme.color.base.line,
71
- },
72
- neutral: {
73
- base: theme_1.straitsXTheme.color.surface.neutral,
74
- text: theme_1.straitsXTheme.color.base.onNeutralSecondary,
75
- icon: theme_1.straitsXTheme.color.base.onNeutralSecondary,
76
- border: theme_1.straitsXTheme.color.base.line,
77
- },
78
- };
79
- //# sourceMappingURL=const.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"const.js","sourceRoot":"","sources":["../../../src/components/Tag/const.ts"],"names":[],"mappings":"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"}
@@ -1,40 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.default = default_1;
8
- var react_1 = require("react");
9
- var styled_1 = require("@emotion/styled");
10
- var MaterialSymbols_1 = require("src/icons/MaterialSymbols");
11
- var Typography_1 = require("src/constants/Typography/Typography");
12
- var const_1 = require("src/components/Tag/const");
13
- var src_1 = require("src");
14
- function getColorByProperty(type, variant, property) {
15
- switch (variant) {
16
- case 'outlined':
17
- return const_1.OUTLINED_TAG_COLORS[type][property];
18
- case 'filled':
19
- return const_1.FILLED_TAG_COLORS[type][property];
20
- case 'removable':
21
- return const_1.REMOVABLE_TAG_COLORS[type][property];
22
- default:
23
- return const_1.OUTLINED_TAG_COLORS[type][property];
24
- }
25
- }
26
- function default_1(_a) {
27
- var type = _a.type, children = _a.children, _b = _a.showIcon, showIcon = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, _d = _a.variant, variant = _d === void 0 ? 'outlined' : _d, onClick = _a.onClick;
28
- return (react_1.default.createElement(Base, { type: type, size: size, variant: variant, onClick: variant !== 'removable' ? onClick : undefined },
29
- showIcon && type !== 'disabled' && (react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: const_1.ICON_MAP[type], size: size === 'sm' ? 'xs' : 's', color: getColorByProperty(type, variant, 'icon') })),
30
- react_1.default.createElement(Typography_1.Typography.Body, { size: size, color: getColorByProperty(type, variant, 'text') }, children),
31
- variant === 'removable' && (react_1.default.createElement(CloseButton, { onClick: onClick, type: "tertiary", icon: react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "close", size: size === 'sm' ? 'xs' : 's', color: getColorByProperty(type, variant, 'icon') }) }))));
32
- }
33
- var getAdditionalStyles = function (_a) {
34
- var type = _a.type, _b = _a.variant, variant = _b === void 0 ? 'outlined' : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, onClick = _a.onClick;
35
- return "\n border-radius: ".concat(variant === 'removable' ? '999px' : '4px', ";\n min-height: ").concat(size === 'sm' ? '24px' : '32px', ";\n background-color: ").concat(type && variant ? getColorByProperty(type, variant, 'base') : 'transparent', ";\n border: 1px solid ").concat(type && variant ? getColorByProperty(type, variant, 'border') : 'transparent', ";\n padding-inline: ").concat(variant === 'removable' ? '12px' : '8px', ";\n cursor: ").concat(onClick ? 'pointer' : 'default', ";\n\n");
36
- };
37
- var CloseButton = (0, styled_1.default)(src_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n padding: 0 !important;\n width: auto !important;\n height: auto !important;\n }\n\n &&:hover {\n background: transparent !important;\n }\n\n &&:focus {\n background: transparent !important;\n }\n\n &&:active {\n background: transparent !important;\n }\n"], ["\n && {\n padding: 0 !important;\n width: auto !important;\n height: auto !important;\n }\n\n &&:hover {\n background: transparent !important;\n }\n\n &&:focus {\n background: transparent !important;\n }\n\n &&:active {\n background: transparent !important;\n }\n"])));
38
- var Base = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n\n ", ";\n"], ["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: fit-content;\n\n ", ";\n"])), function (props) { return getAdditionalStyles(props); });
39
- var templateObject_1, templateObject_2;
40
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":""}
@@ -1,11 +0,0 @@
1
- import { FilledTagType, OutlinedTagType, RemovableTagType, TagColorSchema } from './types';
2
- export declare const ICON_MAP: {
3
- readonly positive: "check";
4
- readonly critical: "cancel";
5
- readonly warning: "timer";
6
- readonly info: "info";
7
- readonly neutral: "timer";
8
- };
9
- export declare const OUTLINED_TAG_COLORS: Record<OutlinedTagType, TagColorSchema>;
10
- export declare const FILLED_TAG_COLORS: Record<FilledTagType, TagColorSchema>;
11
- export declare const REMOVABLE_TAG_COLORS: Record<RemovableTagType, TagColorSchema>;
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { TagType, TagVariant } from './types';
3
- type Props = {
4
- type: TagType;
5
- children: React.ReactNode;
6
- showIcon?: boolean;
7
- size?: 'sm' | 'lg';
8
- variant?: TagVariant;
9
- onClick?: () => void;
10
- };
11
- export default function ({ type, children, showIcon, size, variant, onClick, }: Props): React.JSX.Element;
12
- export {};
@@ -1,13 +0,0 @@
1
- export type OutlinedTagType = 'positive' | 'critical' | 'warning' | 'info' | 'neutral';
2
- export type FilledTagType = 'positive' | 'neutral';
3
- export type RemovableTagType = 'positive' | 'disabled' | 'neutral';
4
- export type TagSchemaType = 'base' | 'text' | 'icon' | 'border';
5
- export type TagColorSchema = {
6
- base: string;
7
- text: string;
8
- icon: string;
9
- border: string;
10
- };
11
- export type TagType = 'positive' | 'critical' | 'warning' | 'info' | 'neutral' | 'disabled';
12
- export type TagVariant = 'outlined' | 'filled' | 'removable';
13
- export type TagSize = 'sm' | 'lg';