@itcase/ui 1.8.12 → 1.8.13
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/cjs/components/Tab.js +1 -1
- package/dist/cjs/components/Textarea.js +16 -0
- package/dist/components/Tab.js +1 -1
- package/dist/components/Textarea.js +16 -0
- package/dist/css/styles/cursor/cursor.css +4 -1
- package/dist/css/styles/fill/fill.css +16 -0
- package/dist/css/styles/text-color/text-color.css +16 -0
- package/dist/types/components/Textarea/appearance/textareaDefault.d.ts +16 -0
- package/package.json +8 -7
|
@@ -124,7 +124,7 @@ function Tab(props) {
|
|
|
124
124
|
var tab = useStyles.useStyles(props).styles;
|
|
125
125
|
return (jsxRuntime.jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', !isDisabled
|
|
126
126
|
? fillClass && "fill_".concat(fillClass)
|
|
127
|
-
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize,
|
|
127
|
+
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover, zIndex: "1" })] })), after] }) }) }));
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
function TabGroup(props) {
|
|
@@ -32,6 +32,22 @@ var textareaAppearanceDefault = {
|
|
|
32
32
|
iconClearFill: 'surfaceItemPrimary',
|
|
33
33
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
34
34
|
},
|
|
35
|
+
defaultTertiaryy: {
|
|
36
|
+
fill: 'surfacePrimary',
|
|
37
|
+
borderColor: 'surfaceBorderTertiary',
|
|
38
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
39
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
40
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
41
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
42
|
+
},
|
|
43
|
+
defaultQuaternary: {
|
|
44
|
+
fill: 'surfacePrimary',
|
|
45
|
+
borderColor: 'surfaceBorderTertiary',
|
|
46
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
47
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
48
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
49
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
50
|
+
},
|
|
35
51
|
};
|
|
36
52
|
|
|
37
53
|
var textareaAppearanceDisabled = {
|
package/dist/components/Tab.js
CHANGED
|
@@ -122,7 +122,7 @@ function Tab(props) {
|
|
|
122
122
|
var tab = useStyles(props).styles;
|
|
123
123
|
return (jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', !isDisabled
|
|
124
124
|
? fillClass && "fill_".concat(fillClass)
|
|
125
|
-
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize,
|
|
125
|
+
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover, zIndex: "1" })] })), after] }) }) }));
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
function TabGroup(props) {
|
|
@@ -30,6 +30,22 @@ var textareaAppearanceDefault = {
|
|
|
30
30
|
iconClearFill: 'surfaceItemPrimary',
|
|
31
31
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
32
32
|
},
|
|
33
|
+
defaultTertiaryy: {
|
|
34
|
+
fill: 'surfacePrimary',
|
|
35
|
+
borderColor: 'surfaceBorderTertiary',
|
|
36
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
37
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
38
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
39
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
40
|
+
},
|
|
41
|
+
defaultQuaternary: {
|
|
42
|
+
fill: 'surfacePrimary',
|
|
43
|
+
borderColor: 'surfaceBorderTertiary',
|
|
44
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
45
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
46
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
47
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
48
|
+
},
|
|
33
49
|
};
|
|
34
50
|
|
|
35
51
|
var textareaAppearanceDisabled = {
|
|
@@ -29,4 +29,20 @@
|
|
|
29
29
|
/* } */
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
+
@each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
|
|
33
|
+
pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
|
|
34
|
+
apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
|
|
35
|
+
pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
|
|
36
|
+
pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
|
|
37
|
+
beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
|
|
38
|
+
pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
|
|
39
|
+
deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
|
|
40
|
+
delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
|
|
41
|
+
pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
|
|
42
|
+
dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
|
|
43
|
+
stone, pebble, cocoa, coastal-gray, white, black {
|
|
44
|
+
&_$(palette) {
|
|
45
|
+
background: var(--color-palette-$(palette));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
32
48
|
}
|
|
@@ -13,5 +13,21 @@
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
+
@each $palette in red, neon-pink, electric-pink, hibiscus, pink,
|
|
17
|
+
pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
|
|
18
|
+
clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
|
|
19
|
+
rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
|
|
20
|
+
canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
|
|
21
|
+
spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
|
|
22
|
+
surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
|
|
23
|
+
denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
|
|
24
|
+
lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
|
|
25
|
+
storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
|
|
26
|
+
alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
|
|
27
|
+
gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black {
|
|
28
|
+
&_$(palette) {
|
|
29
|
+
color: var(--color-palette-$(palette));
|
|
30
|
+
}
|
|
31
|
+
}
|
|
16
32
|
}
|
|
17
33
|
}
|
|
@@ -14,5 +14,21 @@ declare const textareaAppearanceDefault: {
|
|
|
14
14
|
iconClearFill: string;
|
|
15
15
|
placeholderTextColor: string;
|
|
16
16
|
};
|
|
17
|
+
defaultTertiaryy: {
|
|
18
|
+
fill: string;
|
|
19
|
+
borderColor: string;
|
|
20
|
+
borderHover: string;
|
|
21
|
+
iconBeforeFill: string;
|
|
22
|
+
iconClearFill: string;
|
|
23
|
+
placeholderTextColor: string;
|
|
24
|
+
};
|
|
25
|
+
defaultQuaternary: {
|
|
26
|
+
fill: string;
|
|
27
|
+
borderColor: string;
|
|
28
|
+
borderHover: string;
|
|
29
|
+
iconBeforeFill: string;
|
|
30
|
+
iconClearFill: string;
|
|
31
|
+
placeholderTextColor: string;
|
|
32
|
+
};
|
|
17
33
|
};
|
|
18
34
|
export { textareaAppearanceDefault };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.13",
|
|
4
4
|
"description": "UI components (Modal, Loader, Popup, etc)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -100,17 +100,18 @@
|
|
|
100
100
|
"@itcase/config": "^1.0.47",
|
|
101
101
|
"@itcase/icons": "^1.1.1",
|
|
102
102
|
"@itcase/storybook-config": "^1.1.10",
|
|
103
|
-
"@itcase/tokens-am": "^1.1.
|
|
104
|
-
"@itcase/tokens-baikal": "^1.1.
|
|
103
|
+
"@itcase/tokens-am": "^1.1.8",
|
|
104
|
+
"@itcase/tokens-baikal": "^1.1.8",
|
|
105
105
|
"@itcase/types": "^1.0.3",
|
|
106
|
+
"@itcase/tokens-palette": "^1.1.8",
|
|
106
107
|
"clsx": "^2.1.1",
|
|
107
108
|
"date-fns": "^4.1.0",
|
|
108
109
|
"eslint-import-resolver-alias": "^1.1.2",
|
|
109
110
|
"eslint-plugin-import": "^2.31.0",
|
|
110
|
-
"framer-motion": "^12.
|
|
111
|
+
"framer-motion": "^12.15.0",
|
|
111
112
|
"js-cookie": "^3.0.5",
|
|
112
113
|
"lodash": "^4.17.21",
|
|
113
|
-
"motion": "^12.
|
|
114
|
+
"motion": "^12.15.0",
|
|
114
115
|
"rc-slider": "^11.1.8",
|
|
115
116
|
"react": "^18.3.1",
|
|
116
117
|
"react-dadata": "^2.27.4",
|
|
@@ -130,7 +131,7 @@
|
|
|
130
131
|
"uuid": "^11.1.0"
|
|
131
132
|
},
|
|
132
133
|
"devDependencies": {
|
|
133
|
-
"@babel/core": "^7.27.
|
|
134
|
+
"@babel/core": "^7.27.3",
|
|
134
135
|
"@babel/preset-env": "^7.27.2",
|
|
135
136
|
"@babel/preset-react": "^7.27.1",
|
|
136
137
|
"@commitlint/cli": "^19.8.1",
|
|
@@ -162,7 +163,7 @@
|
|
|
162
163
|
"conventional-changelog-conventionalcommits": "^9.0.0",
|
|
163
164
|
"eslint": "9.27.0",
|
|
164
165
|
"husky": "^9.1.7",
|
|
165
|
-
"lint-staged": "^16.
|
|
166
|
+
"lint-staged": "^16.1.0",
|
|
166
167
|
"npm": "^11.4.1",
|
|
167
168
|
"postcss": "^8.5.3",
|
|
168
169
|
"prettier": "^3.5.3",
|