@rescui/card 0.10.10 → 0.10.12-RUI-226-Update-card-cn-6e43cc89.60

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.
Files changed (7) hide show
  1. package/lib/card.d.ts +18 -10
  2. package/lib/card.js +48 -58
  3. package/lib/card.p.module.css.js +23 -21
  4. package/lib/index.css +370 -181
  5. package/lib/index.d.ts +1 -1
  6. package/lib/index.js +1 -1
  7. package/package.json +11 -10
package/lib/card.d.ts CHANGED
@@ -1,54 +1,62 @@
1
1
  export declare type CardIsClickable = boolean;
2
2
  export declare type CardTheme = 'light' | 'dark';
3
3
  export declare type CardMode = 'classic' | 'rock';
4
- export declare type CardPaddings = 16 | 24 | 32;
4
+ export declare type CardPaddings = 0 | 16 | 24 | 32;
5
5
  export declare type CardBorderRadius = 0 | 8 | 16 | 24;
6
6
  export declare type CardGlowHover = boolean;
7
7
  export declare type CardImageType = 'cardImageImg' | 'cardImageDiv';
8
8
  export declare type CardProps = {
9
- /** Card clickable property
9
+ /** Clickable property
10
10
  * @default false
11
11
  * */
12
12
  isClickable?: CardIsClickable;
13
13
  /** Appearance theme
14
- * @default light
14
+ * @default auto
15
15
  * */
16
16
  theme?: CardTheme;
17
- /** Appearance mode
17
+ /** Appearance mode, only works for `clickable` cards
18
18
  * @default classic
19
19
  * */
20
20
  mode?: CardMode;
21
21
  /** Appearance paddings
22
22
  * @default 24
23
23
  * */
24
+ padding?: CardPaddings;
25
+ /**
26
+ * @default 24
27
+ * @deprecated use `padding` instead
28
+ * */
24
29
  paddings?: CardPaddings;
25
30
  /** Card borders style
26
31
  * @default 8
27
32
  * */
28
33
  borderRadius?: CardBorderRadius;
29
- /** Card has glowHover effect provided by `useGlowHover` hook
34
+ /**
30
35
  * @default false
36
+ * @deprecated with latest `@rescui/use-glow-hover` version it resolves automatically
31
37
  * */
32
38
  hasGlowHover?: CardGlowHover;
33
- /** Disable border for all cases except isClickable without glow-hover
39
+ /** Disables border
34
40
  * @default false
35
41
  * */
36
42
  disableBorder?: boolean;
37
43
  };
38
44
  export declare type CardImgType = {
39
- /**
45
+ /** Sets type of image in a card
40
46
  * @default cardImageDiv
41
47
  * */
42
48
  cardImageType?: CardImageType;
43
- /** Disable predefined image height, if you use this prop you should manually equalize image heights between cards on one row/group
49
+ /** Disable predefined image height, when using this prop manually equalize image heights within cards in one row or group
44
50
  * @default false
45
51
  * */
46
52
  disableFixedHeight?: boolean;
47
- /** Disable image stretching to the card width. Applied only to the `cardImageImg` card image type.
53
+ /** Disable stretching the image to the card width, only applies to the `cardImageImg` card image type
48
54
  * @default false
49
55
  * */
50
56
  disableFullWidth?: boolean;
51
57
  };
52
- export declare const cardCn: ({ isClickable, theme, mode, paddings, borderRadius, hasGlowHover, disableBorder }?: CardProps) => string;
58
+ export declare const cardLinkCn: () => any;
59
+ export declare const cardButtonCn: () => any;
60
+ export declare const cardCn: ({ isClickable, theme, mode, padding, borderRadius, disableBorder, paddings, hasGlowHover }?: CardProps) => string;
53
61
  export declare const cardImageCn: ({ cardImageType, disableFixedHeight, disableFullWidth }: CardImgType) => string;
54
62
  export declare const useCardCn: () => (cardCnOptions?: CardProps) => string;
package/lib/card.js CHANGED
@@ -1,80 +1,70 @@
1
- import "core-js/modules/es.object.to-string.js";
2
- import "core-js/modules/web.dom-collections.for-each.js";
3
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
4
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
5
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
6
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
7
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
8
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
-
10
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
-
12
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
13
-
14
1
  import cn from 'classnames';
15
2
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
16
3
  import styles from './card.p.module.css.js';
17
- var THEME_STYLES = {
4
+
5
+ const cardLinkCn = () => styles.innerLink;
6
+
7
+ const cardButtonCn = () => styles.innerButton;
8
+
9
+ const THEME_STYLES = {
18
10
  light: styles.themeLight,
19
11
  dark: styles.themeDark
20
12
  };
21
- var MODE_STYLES = {
13
+ const MODE_STYLES = {
22
14
  classic: styles.modeClassic,
23
15
  rock: styles.modeRock
24
16
  };
25
- var PADDINGS_STYLES = {
26
- 16: styles.paddings16,
27
- 24: styles.paddings24,
28
- 32: styles.paddings32
17
+ const PADDING_STYLES = {
18
+ 0: styles.padding0,
19
+ 16: styles.padding16,
20
+ 24: styles.padding24,
21
+ 32: styles.padding32
29
22
  };
30
- var BORDER_RADIUS_STYLES = {
31
- 0: styles.bordersRadius0,
32
- 8: styles.bordersRadius8,
33
- 16: styles.bordersRadius16,
34
- 24: styles.bordersRadius24
23
+ const BORDER_RADIUS_STYLES = {
24
+ 0: styles.borderRadius0,
25
+ 8: styles.borderRadius8,
26
+ 16: styles.borderRadius16,
27
+ 24: styles.borderRadius24
35
28
  };
36
- var CARD_IMAGE_STYLES = {
29
+ const CARD_IMAGE_STYLES = {
37
30
  cardImageImg: styles.cardImageImg,
38
31
  cardImageDiv: styles.cardImageDiv
39
32
  }; // eslint-disable-next-line complexity
40
33
 
41
- var cardCn = function cardCn() {
42
- var _THEME_STYLES$theme, _MODE_STYLES$mode, _PADDINGS_STYLES$padd, _BORDER_RADIUS_STYLES, _cn;
43
-
44
- var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
45
- isClickable = _ref.isClickable,
46
- theme = _ref.theme,
47
- mode = _ref.mode,
48
- paddings = _ref.paddings,
49
- borderRadius = _ref.borderRadius,
50
- hasGlowHover = _ref.hasGlowHover,
51
- disableBorder = _ref.disableBorder;
52
-
53
- var themeClass = (_THEME_STYLES$theme = THEME_STYLES[theme]) !== null && _THEME_STYLES$theme !== void 0 ? _THEME_STYLES$theme : '';
54
- var modeClass = (_MODE_STYLES$mode = MODE_STYLES[mode]) !== null && _MODE_STYLES$mode !== void 0 ? _MODE_STYLES$mode : MODE_STYLES.classic;
55
- var paddingsClass = (_PADDINGS_STYLES$padd = PADDINGS_STYLES[paddings]) !== null && _PADDINGS_STYLES$padd !== void 0 ? _PADDINGS_STYLES$padd : PADDINGS_STYLES[24];
56
- var borderRadiusClass = (_BORDER_RADIUS_STYLES = BORDER_RADIUS_STYLES[borderRadius]) !== null && _BORDER_RADIUS_STYLES !== void 0 ? _BORDER_RADIUS_STYLES : BORDER_RADIUS_STYLES[8];
57
- var showBorderStatesClass = isClickable && (!disableBorder || !hasGlowHover);
58
- return cn(styles.card, themeClass, modeClass, paddingsClass, borderRadiusClass, (_cn = {}, _defineProperty(_cn, styles.cardPlain, !isClickable), _defineProperty(_cn, styles.glowHover, hasGlowHover), _defineProperty(_cn, styles.withStaticBorder, !disableBorder), _defineProperty(_cn, styles.withStatesBorder, showBorderStatesClass), _cn));
34
+ const cardCn = function () {
35
+ let {
36
+ isClickable,
37
+ theme,
38
+ mode,
39
+ padding,
40
+ borderRadius,
41
+ disableBorder,
42
+ paddings,
43
+ hasGlowHover
44
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
45
+ const themeClass = THEME_STYLES[theme] ?? '';
46
+ const modeClass = MODE_STYLES[mode] ?? MODE_STYLES.classic;
47
+ const paddingClass = PADDING_STYLES[padding ?? paddings] ?? PADDING_STYLES[24];
48
+ const borderRadiusClass = BORDER_RADIUS_STYLES[borderRadius] ?? BORDER_RADIUS_STYLES[8];
49
+ return cn(isClickable ? styles.clickable : styles.tile, themeClass, isClickable ? modeClass : MODE_STYLES.classic, paddingClass, borderRadiusClass, hasGlowHover && styles.hasGlowHover, disableBorder && styles.disableBorder);
59
50
  };
60
51
 
61
- var cardImageCn = function cardImageCn(_ref2) {
62
- var _CARD_IMAGE_STYLES$ca;
63
-
64
- var cardImageType = _ref2.cardImageType,
65
- disableFixedHeight = _ref2.disableFixedHeight,
66
- disableFullWidth = _ref2.disableFullWidth;
67
- var cardImgExtraStyles = (_CARD_IMAGE_STYLES$ca = CARD_IMAGE_STYLES[cardImageType]) !== null && _CARD_IMAGE_STYLES$ca !== void 0 ? _CARD_IMAGE_STYLES$ca : CARD_IMAGE_STYLES.cardImageDiv;
52
+ const cardImageCn = _ref => {
53
+ let {
54
+ cardImageType,
55
+ disableFixedHeight,
56
+ disableFullWidth
57
+ } = _ref;
58
+ const cardImgExtraStyles = CARD_IMAGE_STYLES[cardImageType] ?? CARD_IMAGE_STYLES.cardImageDiv;
68
59
  return cn(styles.cardImage, cardImgExtraStyles, !disableFixedHeight && styles.fixedImageHeight, !disableFullWidth && styles.fullImageWidth);
69
60
  };
70
61
 
71
- var useCardCn = function useCardCn() {
72
- var theme = useThemeWithUndefined();
73
- return function (cardCnOptions) {
74
- return cardCn(_objectSpread({
75
- theme: theme
76
- }, cardCnOptions));
77
- };
62
+ const useCardCn = () => {
63
+ const theme = useThemeWithUndefined();
64
+ return cardCnOptions => cardCn({
65
+ theme,
66
+ ...cardCnOptions
67
+ });
78
68
  };
79
69
 
80
- export { cardCn, cardImageCn, useCardCn };
70
+ export { cardButtonCn, cardCn, cardImageCn, cardLinkCn, useCardCn };
package/lib/card.p.module.css.js CHANGED
@@ -1,24 +1,26 @@
1
1
  var styles = {
2
- "card": "_card_1fxi8cx_6",
3
- "themeLight": "_themeLight_1fxi8cx_47",
4
- "themeDark": "_themeDark_1fxi8cx_52",
5
- "withStaticBorder": "_withStaticBorder_1fxi8cx_56",
6
- "cardPlain": "_cardPlain_1fxi8cx_60",
7
- "modeClassic": "_modeClassic_1fxi8cx_60",
8
- "modeRock": "_modeRock_1fxi8cx_61",
9
- "withStatesBorder": "_withStatesBorder_1fxi8cx_66",
10
- "paddings16": "_paddings16_1fxi8cx_95",
11
- "paddings24": "_paddings24_1fxi8cx_99",
12
- "paddings32": "_paddings32_1fxi8cx_103",
13
- "glowHover": "_glowHover_1fxi8cx_71",
14
- "bordersRadius0": "_bordersRadius0_1fxi8cx_107",
15
- "bordersRadius8": "_bordersRadius8_1fxi8cx_111",
16
- "bordersRadius16": "_bordersRadius16_1fxi8cx_115",
17
- "bordersRadius24": "_bordersRadius24_1fxi8cx_119",
18
- "cardImage": "_cardImage_1fxi8cx_123",
19
- "cardImageImg": "_cardImageImg_1fxi8cx_131",
20
- "cardImageDiv": "_cardImageDiv_1fxi8cx_165",
21
- "fixedImageHeight": "_fixedImageHeight_1fxi8cx_200",
22
- "fullImageWidth": "_fullImageWidth_1fxi8cx_218"
2
+ "themeLight": "_themeLight_1cx2pa_8",
3
+ "themeDark": "_themeDark_1cx2pa_11",
4
+ "padding0": "_padding0_1cx2pa_15",
5
+ "padding16": "_padding16_1cx2pa_18",
6
+ "padding24": "_padding24_1cx2pa_21",
7
+ "padding32": "_padding32_1cx2pa_24",
8
+ "borderRadius0": "_borderRadius0_1cx2pa_28",
9
+ "borderRadius8": "_borderRadius8_1cx2pa_31",
10
+ "borderRadius16": "_borderRadius16_1cx2pa_34",
11
+ "borderRadius24": "_borderRadius24_1cx2pa_37",
12
+ "modeClassic": "_modeClassic_1cx2pa_41",
13
+ "modeRock": "_modeRock_1cx2pa_50",
14
+ "clickable": "_clickable_1cx2pa_120",
15
+ "disableBorder": "_disableBorder_1cx2pa_77",
16
+ "hasGlowHover": "_hasGlowHover_1cx2pa_81",
17
+ "tile": "_tile_1cx2pa_241",
18
+ "fixedImageHeight": "_fixedImageHeight_1cx2pa_295",
19
+ "fullImageWidth": "_fullImageWidth_1cx2pa_304",
20
+ "cardImage": "_cardImage_1cx2pa_308",
21
+ "cardImageImg": "_cardImageImg_1cx2pa_316",
22
+ "cardImageDiv": "_cardImageDiv_1cx2pa_341",
23
+ "innerLink": "_innerLink_1cx2pa_366",
24
+ "innerButton": "_innerButton_1cx2pa_378"
23
25
  };
24
26
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,64 @@
1
- ._card_1fxi8cx_6{
1
+ ._themeLight_1cx2pa_8{
2
+ --rs-theme-dark:0;
3
+ }
4
+
5
+ ._themeDark_1cx2pa_11{
6
+ --rs-theme-dark:1;
7
+ }
8
+
9
+ ._padding0_1cx2pa_15{
10
+ --_rs-card-padding:0px;
11
+ }
12
+
13
+ ._padding16_1cx2pa_18{
14
+ --_rs-card-padding:16px;
15
+ }
16
+
17
+ ._padding24_1cx2pa_21{
18
+ --_rs-card-padding:24px;
19
+ }
20
+
21
+ ._padding32_1cx2pa_24{
22
+ --_rs-card-padding:32px;
23
+ }
24
+
25
+ ._borderRadius0_1cx2pa_28{
26
+ --_rs-card-border-radius:0px;
27
+ }
28
+
29
+ ._borderRadius8_1cx2pa_31{
30
+ --_rs-card-border-radius:8px;
31
+ }
32
+
33
+ ._borderRadius16_1cx2pa_34{
34
+ --_rs-card-border-radius:16px;
35
+ }
36
+
37
+ ._borderRadius24_1cx2pa_37{
38
+ --_rs-card-border-radius:24px;
39
+ }
40
+
41
+ ._modeClassic_1cx2pa_41{
42
+ --_rs-card-states-theme-flip:0;
43
+
44
+ --_rs-card-hover-focus-border-width:1px;
45
+ --_rs-card-active-border-width:2px;
46
+
47
+ --_rs-card-hover-focus-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
48
+ --_rs-card-active-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
49
+ }
50
+
51
+ ._modeRock_1cx2pa_50{
52
+ --_rs-card-states-theme-flip:1;
53
+
54
+ --_rs-card-hover-focus-border-width:0px;
55
+ --_rs-card-active-border-width:0px;
56
+
57
+ --_rs-card-hover-focus-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
58
+ --_rs-card-active-background:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
59
+ }
60
+
61
+ ._clickable_1cx2pa_120{
2
62
  --_rs-theme-dark:var(
3
63
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
64
  var(--rs-theme-dark, 0)
@@ -6,236 +66,365 @@
6
66
  --_rs-theme-flip:var(--rs-theme-flip, 0);
7
67
  --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
8
68
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
69
+ --_rs-card-native-base-border-width:1px;
70
+ --_rs-card-native-hover-border-width:var(
71
+ --_rs-card-hover-focus-border-width
72
+ );
73
+ --_rs-card-native-hover-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
74
+ --_rs-card-native-focus-border-width:var(
75
+ --_rs-card-hover-focus-border-width
76
+ );
77
+ --_rs-card-native-focus-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
78
+ --_rs-card-native-active-border-width:var(--_rs-card-active-border-width);
79
+ --_rs-card-native-active-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
80
+ }
9
81
 
10
- overflow:hidden;
82
+ ._clickable_1cx2pa_120._disableBorder_1cx2pa_77{
83
+ --_rs-card-native-base-border-width:0px;
84
+ }
11
85
 
12
- -webkit-box-sizing:border-box;
86
+ ._clickable_1cx2pa_120:is([data-extra-hover-effect], ._hasGlowHover_1cx2pa_81){
87
+ --_rs-card-native-hover-border-width:1px;
88
+ --_rs-card-native-hover-border-color:rgba(
89
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
90
+ 0.2
91
+ );
13
92
 
14
- box-sizing:border-box;
15
- min-height:0;
93
+ --_rs-card-native-focus-border-width:1px;
94
+
95
+ --_rs-card-native-active-border-width:2px;
96
+ --_rs-card-native-active-border-color:rgb(
97
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
98
+ );
99
+ }
100
+
101
+ ._clickable_1cx2pa_120:is([data-extra-hover-effect], ._hasGlowHover_1cx2pa_81)[data-extra-active-effect]{
102
+ --_rs-card-native-active-border-width:1px;
103
+ --_rs-card-native-active-border-color:rgba(
104
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
105
+ 0.2
106
+ );
107
+ }
108
+
109
+ ._clickable_1cx2pa_120:is([data-extra-hover-effect], ._hasGlowHover_1cx2pa_81)._disableBorder_1cx2pa_77{
110
+ --_rs-card-native-hover-border-width:0px;
111
+ --_rs-card-native-hover-border-color:transparent;
112
+
113
+ --_rs-card-native-active-border-width:1px;
114
+ }
115
+
116
+ ._clickable_1cx2pa_120:is([data-extra-hover-effect], ._hasGlowHover_1cx2pa_81)._disableBorder_1cx2pa_77[data-extra-active-effect]{
117
+ --_rs-card-native-active-border-width:0px;
118
+ --_rs-card-native-active-border-color:transparent;
119
+ }
16
120
 
17
- border-width:1px;
18
- border-style:solid;
121
+ ._clickable_1cx2pa_120 {
19
122
 
20
- border-color:var(--rs-card-border-color, transparent);
21
- border-radius:var(--rs-card-border-radius, 0);
123
+ --_rs-card-env-background:var(
124
+ --rs-card-static-background,
125
+ rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204))
126
+ );
127
+ --_rs-card-env-border-width:var(
128
+ --rs-card-static-border-width,
129
+ var(--_rs-card-native-base-border-width)
130
+ );
131
+ --_rs-card-env-border-color:var(
132
+ --rs-card-static-border-color,
133
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2)
134
+ );
135
+ --_rs-card-padding-final:var(--rs-card-padding, var(--_rs-card-padding));
136
+
137
+ position:relative;
138
+
139
+ display:block;
140
+
141
+ overflow:hidden;
142
+
143
+ box-sizing:border-box;
144
+ min-height:0;
145
+ padding:var(--_rs-card-padding-final);
146
+
147
+ border:none;
148
+ border-radius:var(--rs-card-border-radius, var(--_rs-card-border-radius));
22
149
 
23
150
  cursor:pointer;
24
151
  text-align:inherit;
25
152
 
26
- background-color:var(--rs-card-background-color, rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204)));
27
-
28
- -webkit-transition:color 100ms, background-color 100ms, border-color 100ms;
153
+ background:var(--_rs-card-env-background);
29
154
 
30
- transition:color 100ms, background-color 100ms, border-color 100ms;
155
+ transition:color 100ms, background-color 100ms;
31
156
  -webkit-appearance:none;
32
157
  -moz-appearance:none;
33
158
  appearance:none;
34
- -webkit-mask-image:-webkit-radial-gradient(white, black);
35
159
  }
36
- ._card_1fxi8cx_6:focus-visible{
37
- outline:none;
160
+
161
+ ._clickable_1cx2pa_120::after{
162
+ position:absolute;
163
+ top:0;
164
+ right:0;
165
+ bottom:0;
166
+ left:0;
167
+
168
+ display:block;
169
+
170
+ border-radius:inherit;
171
+
172
+ content:'';
173
+ pointer-events:none;
174
+
175
+ box-shadow:inset 0 0 0 var(--_rs-card-env-border-width) var(--_rs-card-env-border-color);
176
+
177
+ transition:box-shadow 100ms;
38
178
  }
39
- a._card_1fxi8cx_6{
40
- display:block;
41
179
 
42
- text-decoration:none;
43
- }
44
- a._card_1fxi8cx_6:hover{
45
- text-decoration:none;
46
- }
47
- ._themeLight_1fxi8cx_47{
48
- --rs-theme-dark:0;
49
- }
50
- ._themeDark_1fxi8cx_52{
51
- --rs-theme-dark:1;
52
- }
53
- ._withStaticBorder_1fxi8cx_56{
54
- border-color:var(--rs-card-border-color, rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), .2));
55
- }
56
- ._cardPlain_1fxi8cx_60._modeClassic_1fxi8cx_60,
57
- ._cardPlain_1fxi8cx_60._modeRock_1fxi8cx_61{
58
- cursor:auto;
59
- }
60
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:active{
61
- border-width:2px;
180
+ ._clickable_1cx2pa_120,
181
+ ._clickable_1cx2pa_120:hover{
182
+ text-decoration:none;
62
183
  }
63
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:active._paddings16_1fxi8cx_95{
64
- padding:15px;
184
+
185
+ @media (hover: hover){
186
+ ._clickable_1cx2pa_120:hover{
187
+ --rs-theme-flip:var(--_rs-card-states-theme-flip);
188
+
189
+ --_rs-card-env-background:var(
190
+ --rs-card-hover-background,
191
+ var(--_rs-card-hover-focus-background)
192
+ );
193
+ --_rs-card-env-border-width:var(
194
+ --rs-card-hover-border-width,
195
+ var(--_rs-card-native-hover-border-width)
196
+ );
197
+ --_rs-card-env-border-color:var(
198
+ --rs-card-hover-border-color,
199
+ var(--_rs-card-native-hover-border-color)
200
+ );
201
+ }
65
202
  }
66
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:active._paddings24_1fxi8cx_99{
67
- padding:23px;
203
+
204
+ ._clickable_1cx2pa_120:focus-visible{
205
+ --rs-theme-flip:var(--_rs-card-states-theme-flip);
206
+
207
+ --_rs-card-env-background:var(
208
+ --rs-card-focus-background,
209
+ var(--_rs-card-hover-focus-background)
210
+ );
211
+ --_rs-card-env-border-width:var(
212
+ --rs-card-focus-border-width,
213
+ var(--_rs-card-native-focus-border-width)
214
+ );
215
+ --_rs-card-env-border-color:var(
216
+ --rs-card-focus-border-color,
217
+ var(--_rs-card-native-focus-border-color)
218
+ );
219
+ outline:none;
68
220
  }
69
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:active._paddings32_1fxi8cx_103{
70
- padding:31px;
221
+
222
+ ._clickable_1cx2pa_120:active{
223
+ --rs-theme-flip:var(--_rs-card-states-theme-flip);
224
+
225
+ --_rs-card-env-background:var(
226
+ --rs-card-active-background,
227
+ var(--_rs-card-active-background)
228
+ );
229
+ --_rs-card-env-border-width:var(
230
+ --rs-card-active-border-width,
231
+ var(--_rs-card-native-active-border-width)
232
+ );
233
+ --_rs-card-env-border-color:var(
234
+ --rs-card-active-border-color,
235
+ var(--_rs-card-native-active-border-color)
236
+ );
71
237
  }
72
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:not(._glowHover_1fxi8cx_71):hover,
73
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:not(._glowHover_1fxi8cx_71):focus[data-focus-method='key'],
74
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:not(._glowHover_1fxi8cx_71):focus-visible,
75
- ._modeClassic_1fxi8cx_60._withStatesBorder_1fxi8cx_66:not(._glowHover_1fxi8cx_71):active{
76
- --rs-card-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
77
- }
78
- ._modeRock_1fxi8cx_61:hover,
79
- ._modeRock_1fxi8cx_61:focus[data-focus-method='key'],
80
- ._modeRock_1fxi8cx_61:focus-visible{
81
- --rs-theme-flip:1;
82
- background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
238
+
239
+ ._tile_1cx2pa_241{
240
+ --_rs-theme-dark:var(
241
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
242
+ var(--rs-theme-dark, 0)
243
+ );
244
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
245
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
246
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
247
+
248
+ --_rs-card-padding-final:var(--rs-card-padding, var(--_rs-card-padding));
249
+
250
+ position:relative;
251
+
252
+ display:block;
253
+ overflow:hidden;
254
+
255
+ box-sizing:border-box;
256
+ min-height:0;
257
+ padding:var(--_rs-card-padding-final);
258
+
259
+ border:none;
260
+ border-radius:var(--rs-card-border-radius, var(--_rs-card-border-radius));
261
+
262
+ cursor:auto;
263
+ text-align:inherit;
264
+ text-decoration:none;
265
+
266
+ background:var(
267
+ --rs-card-static-background,
268
+ rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204))
269
+ );
270
+
271
+ -webkit-appearance:none;
272
+
273
+ -moz-appearance:none;
274
+
275
+ appearance:none;
276
+ }
277
+
278
+ ._tile_1cx2pa_241._disableBorder_1cx2pa_77{
279
+ box-shadow:none;
83
280
  }
84
- ._modeRock_1fxi8cx_61:active{
85
- --rs-theme-flip:1;
86
- background-color:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
281
+
282
+ ._tile_1cx2pa_241::after{
283
+ position:absolute;
284
+ top:0;
285
+ right:0;
286
+ bottom:0;
287
+ left:0;
288
+
289
+ display:block;
290
+
291
+ border-radius:inherit;
292
+
293
+ content:'';
294
+ pointer-events:none;
295
+
296
+ box-shadow:inset 0 0 0 var(--rs-card-static-border-width, 1px) var(
297
+ --rs-card-static-border-color,
298
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2)
299
+ );
87
300
  }
88
- ._paddings16_1fxi8cx_95{
89
- padding:16px;
90
- }
91
- ._paddings24_1fxi8cx_99{
92
- padding:24px;
93
- }
94
- ._paddings32_1fxi8cx_103{
95
- padding:32px;
96
- }
97
- ._bordersRadius0_1fxi8cx_107{
98
- --rs-card-border-radius:0;
99
- }
100
- ._bordersRadius8_1fxi8cx_111{
101
- --rs-card-border-radius:8px;
102
- }
103
- ._bordersRadius16_1fxi8cx_115{
104
- --rs-card-border-radius:16px;
301
+
302
+ ._fixedImageHeight_1cx2pa_295{
303
+ height:calc(188px + var(--_rs-card-padding-final));
304
+ max-height:calc(188px + var(--_rs-card-padding-final));
105
305
  }
106
- ._bordersRadius24_1fxi8cx_119{
107
- --rs-card-border-radius:24px;
306
+
307
+ ._fixedImageHeight_1cx2pa_295 img{
308
+ height:100%;
309
+ }
310
+
311
+ ._fullImageWidth_1cx2pa_304 img{
312
+ width:100%;
108
313
  }
109
- ._cardImage_1fxi8cx_123{
314
+
315
+ ._cardImage_1cx2pa_308{
110
316
  position:relative;
111
317
 
112
318
  overflow:hidden;
113
319
 
114
- -webkit-box-sizing:border-box;
115
-
116
- box-sizing:border-box;
320
+ box-sizing:border-box;
117
321
  }
118
- ._cardImageImg_1fxi8cx_131{
119
- display:-webkit-box;
120
- display:-ms-flexbox;
322
+
323
+ ._cardImageImg_1cx2pa_316{
324
+ top:calc(var(--_rs-card-padding-final)*-1);
325
+ left:calc(var(--_rs-card-padding-final)*-1);
326
+
121
327
  display:flex;
122
- -webkit-box-pack:center;
123
- -ms-flex-pack:center;
124
- justify-content:center;
125
- -webkit-box-align:center;
126
- -ms-flex-align:center;
127
- align-items:center;
128
- }
129
- ._paddings16_1fxi8cx_95 ._cardImageImg_1fxi8cx_131{
130
- top:-16px;
131
- left:-16px;
132
- width:calc(100% + 32px);
133
- }
134
- ._paddings24_1fxi8cx_99 ._cardImageImg_1fxi8cx_131{
135
- top:-24px;
136
- left:-24px;
137
- width:calc(100% + 48px);
138
- }
139
- ._paddings32_1fxi8cx_103 ._cardImageImg_1fxi8cx_131{
140
- top:-32px;
141
- left:-32px;
142
- width:calc(100% + 64px);
143
- }
144
- ._cardImageImg_1fxi8cx_131 img{
328
+ justify-content:center;
329
+ align-items:center;
330
+
331
+ width:calc(100% + var(--_rs-card-padding-final)*2);
332
+ }
333
+
334
+ ._cardImageImg_1cx2pa_316 img{
145
335
  max-width:100%;
146
336
  max-height:100%;
337
+ }
147
338
 
148
- -webkit-transition:-webkit-transform .2s;
339
+ ._clickable_1cx2pa_120 ._cardImageImg_1cx2pa_316 img{
340
+ transition:transform 0.2s;
341
+ transform:scale(1);
342
+ }
149
343
 
150
- transition:-webkit-transform .2s;
344
+ ._clickable_1cx2pa_120:hover ._cardImageImg_1cx2pa_316 img{
345
+ transform:scale(1.1);
346
+ }
151
347
 
152
- transition:transform .2s;
348
+ ._cardImageDiv_1cx2pa_341{
349
+ top:calc(var(--_rs-card-padding-final)*-1);
350
+ left:calc(var(--_rs-card-padding-final)*-1);
153
351
 
154
- transition:transform .2s, -webkit-transform .2s;
155
- -webkit-transform:scale(1);
156
- transform:scale(1);
157
- }
158
- ._card_1fxi8cx_6:hover ._cardImageImg_1fxi8cx_131 img{
159
- -webkit-transform:scale(1.1);
160
- transform:scale(1.1);
161
- }
162
- ._card_1fxi8cx_6._cardPlain_1fxi8cx_60:hover ._cardImageImg_1fxi8cx_131 img{
163
- -webkit-transform:none;
164
- transform:none;
165
- }
166
- ._cardImageDiv_1fxi8cx_165{
167
- display:-webkit-box;
168
- display:-ms-flexbox;
169
352
  display:flex;
170
- -webkit-box-orient:vertical;
171
- -webkit-box-direction:normal;
172
- -ms-flex-direction:column;
173
- flex-direction:column;
174
- -webkit-box-pack:end;
175
- -ms-flex-pack:end;
176
- justify-content:flex-end;
353
+ flex-direction:column;
354
+ justify-content:flex-end;
177
355
 
356
+ width:calc(100% + var(--_rs-card-padding-final)*2);
357
+ padding:var(--_rs-card-padding-final);
178
358
 
179
359
  background-color:transparent;
180
360
  background-repeat:no-repeat;
181
361
  background-position:center;
182
362
  background-size:100% 100%;
183
-
184
- -webkit-transition:background-size .2s;
185
-
186
- transition:background-size .2s;
187
363
  }
188
- ._paddings16_1fxi8cx_95 ._cardImageDiv_1fxi8cx_165{
189
- top:-16px;
190
- left:-16px;
191
- padding:16px;
192
- width:calc(100% + 32px);
193
- }
194
- ._card_1fxi8cx_6:active ._paddings16_1fxi8cx_95 ._cardImageDiv_1fxi8cx_165{
195
- padding:calc(16px - 1);
196
- }
197
- ._paddings24_1fxi8cx_99 ._cardImageDiv_1fxi8cx_165{
198
- top:-24px;
199
- left:-24px;
200
- padding:24px;
201
- width:calc(100% + 48px);
202
- }
203
- ._card_1fxi8cx_6:active ._paddings24_1fxi8cx_99 ._cardImageDiv_1fxi8cx_165{
204
- padding:calc(24px - 1);
205
- }
206
- ._paddings32_1fxi8cx_103 ._cardImageDiv_1fxi8cx_165{
207
- top:-32px;
208
- left:-32px;
209
- padding:32px;
210
- width:calc(100% + 64px);
211
- }
212
- ._card_1fxi8cx_6:active ._paddings32_1fxi8cx_103 ._cardImageDiv_1fxi8cx_165{
213
- padding:calc(32px - 1);
364
+
365
+ ._clickable_1cx2pa_120 ._cardImageDiv_1cx2pa_341{
366
+ transition:background-size 0.2s;
214
367
  }
215
- ._card_1fxi8cx_6:hover ._cardImageDiv_1fxi8cx_165{
368
+
369
+ ._clickable_1cx2pa_120:hover ._cardImageDiv_1cx2pa_341{
216
370
  background-size:110% 110%;
217
371
  }
218
- ._card_1fxi8cx_6._cardPlain_1fxi8cx_60:hover ._cardImageDiv_1fxi8cx_165{
219
- background-size:100% 100%;
220
- }
221
- ._fixedImageHeight_1fxi8cx_200 img{
222
- height:100%;
223
- }
224
- ._paddings16_1fxi8cx_95 ._fixedImageHeight_1fxi8cx_200{
225
- height:204px;
226
- max-height:204px;
372
+
373
+ @media (hover: hover){
374
+ ._clickable_1cx2pa_120:hover ._innerLink_1cx2pa_366{
375
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
376
+ --_rs-typography-link-border-bottom-width-from-state-hover:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
377
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
378
+ --_rs-typography-link-hover-underline-color-wf
379
+ );
380
+ --_rs-typography-link-border-image-from-state-hover:var(
381
+ --_rs-typography-link-hover-border-image-wf
382
+ );
383
+ --_rs-typography-link-color-from-state-hover:var(
384
+ --_rs-typography-link-hover-color-wf
385
+ );
386
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
387
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
388
+ --_rs-typography-link-hover-after-offset-right-wf
389
+ );
390
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
391
+ --_rs-typography-link-hover-after-offset-left-wf
392
+ );
393
+ }
227
394
  }
228
- ._paddings24_1fxi8cx_99 ._fixedImageHeight_1fxi8cx_200{
229
- height:212px;
230
- max-height:212px;
395
+
396
+ ._clickable_1cx2pa_120:focus-visible ._innerLink_1cx2pa_366{
397
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
398
+ --_rs-color-primary
399
+ ) 0 0 0 4px;
231
400
  }
232
- ._paddings32_1fxi8cx_103 ._fixedImageHeight_1fxi8cx_200{
233
- height:220px;
234
- max-height:220px;
401
+
402
+ @media (hover: hover){
403
+ ._clickable_1cx2pa_120:hover ._innerButton_1cx2pa_378{
404
+ --_rs-button-border-inner-color:rgba(
405
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
406
+ calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
407
+ );
408
+ --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
409
+ }
235
410
  }
236
- ._fullImageWidth_1fxi8cx_218 img{
237
- width:100%;
238
- }
239
411
 
412
+ ._clickable_1cx2pa_120:active ._innerButton_1cx2pa_378{
413
+ --_rs-button-border-inner-width:2px;
414
+ --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
415
+ --_rs-button-background-from-state-active:var(
416
+ --_rs-button-active-background
417
+ );
418
+ }
240
419
 
420
+ ._clickable_1cx2pa_120:focus-visible ._innerButton_1cx2pa_378{
421
+ --_rs-button-box-shadow-from-state-focus-visible:var(
422
+ --_rs-color-primary-t-dim
423
+ ) 0 0 0 4px;
424
+ }
241
425
 
426
+ ._clickable_1cx2pa_120:active:focus-visible:not(:hover) ._innerButton_1cx2pa_378{
427
+ --_rs-button-background-from-state-active-focus-visible-no-hover:var(
428
+ --_rs-button-active-focus-visible-no-hover-background
429
+ );
430
+ }
package/lib/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { cardCn, cardImageCn, useCardCn } from './card';
1
+ export { cardCn, cardImageCn, useCardCn, cardButtonCn, cardLinkCn } from './card';
2
2
  export type { CardProps, CardImgType } from './card';
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import './index.css';
2
- export { cardCn, cardImageCn, useCardCn } from './card.js';
2
+ export { cardButtonCn, cardCn, cardImageCn, cardLinkCn, useCardCn } from './card.js';
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "@rescui/card",
3
- "version": "0.10.10",
3
+ "version": "0.10.12-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
+ "module": "lib/index.js",
6
7
  "src:main": "src/index.ts",
7
8
  "files": [
8
9
  "lib",
@@ -12,9 +13,8 @@
12
13
  "access": "public"
13
14
  },
14
15
  "dependencies": {
15
- "@babel/runtime-corejs3": "^7.14.0",
16
- "classnames": "^2.2.6",
17
- "core-js": "^3.9.1"
16
+ "@babel/runtime-corejs3": "^7.26.0",
17
+ "classnames": "^2.2.6"
18
18
  },
19
19
  "peerDependencies": {
20
20
  "@rescui/ui-contexts": "^0.5.0",
@@ -23,15 +23,16 @@
23
23
  },
24
24
  "devDependencies": {
25
25
  "@jetbrains/logos": "^1.4.16",
26
- "@rescui/colors": "^0.2.5",
27
- "@rescui/postcss-preset-library": "^0.2.2",
28
- "@rescui/scripts": "^0.3.4",
29
- "@rescui/typography": "^0.19.0",
30
- "@rescui/visual-regression": "^0.1.2"
26
+ "@rescui/button": "0.19.2-RUI-226-Update-card-cn-6e43cc89.43+6e43cc89",
27
+ "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
28
+ "@rescui/postcss-preset-library": "0.2.2",
29
+ "@rescui/scripts": "0.4.0",
30
+ "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
31
+ "@rescui/visual-regression": "0.1.2"
31
32
  },
32
33
  "scripts": {
33
34
  "build": "rescui-scripts build"
34
35
  },
35
36
  "nx": {},
36
- "gitHead": "69a84812628809943698f0b27643c83dc449f119"
37
+ "gitHead": "6e43cc893fafb22b990273901bc0a070fb15761f"
37
38
  }