@synerise/ds-card-select 1.1.40 → 1.1.42
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/CHANGELOG.md +8 -0
- package/README.md +5 -4
- package/dist/CardSelect.d.ts +7 -7
- package/dist/CardSelect.js +64 -111
- package/dist/CardSelect.styles.d.ts +18 -18
- package/dist/CardSelect.styles.js +126 -98
- package/dist/CardSelect.types.d.ts +3 -3
- package/dist/CardSelect.types.js +1 -1
- package/dist/CardSelectGroup/CardSelectGroup.d.ts +2 -2
- package/dist/CardSelectGroup/CardSelectGroup.js +19 -28
- package/dist/CardSelectGroup/CardSelectGroup.styles.d.ts +2 -2
- package/dist/CardSelectGroup/CardSelectGroup.styles.js +8 -10
- package/dist/CardSelectGroup/CardSelectGroup.types.d.ts +2 -2
- package/dist/CardSelectGroup/CardSelectGroup.types.js +1 -1
- package/dist/constants.js +10 -4
- package/dist/index.js +6 -2
- package/dist/modules.d.js +1 -0
- package/dist/modules.d.ts +1 -0
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.1.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@1.1.41...@synerise/ds-card-select@1.1.42) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-card-select
|
|
9
|
+
|
|
10
|
+
## [1.1.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@1.1.40...@synerise/ds-card-select@1.1.41) (2026-03-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-card-select
|
|
13
|
+
|
|
6
14
|
## [1.1.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@1.1.39...@synerise/ds-card-select@1.1.40) (2026-03-09)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-card-select
|
package/README.md
CHANGED
|
@@ -53,16 +53,17 @@ yarn add @synerise/ds-card-select
|
|
|
53
53
|
| size | The size of the card | `small` / `medium` | `medium` |
|
|
54
54
|
| raised | Defines border style | boolean | - |
|
|
55
55
|
| icon | Defines the icon | ReactNode | - |
|
|
56
|
-
| iconSize | Overwrites the predefined (
|
|
56
|
+
| iconSize | Overwrites the predefined (96px for `medium` size, 48px for `small` size) size of the icon | number | - |
|
|
57
57
|
| title | Defines the title of the card | `ReactNode` | - |
|
|
58
58
|
| description | Defines the description of the card (not available for `small` size) | `ReactNode` | - |
|
|
59
59
|
| value | Defines if the card is selected by a user | boolean | `false` |
|
|
60
60
|
| tickVisible | Defines the display of the checkbox | boolean | `true` |
|
|
61
|
-
| disabled | Defines if the card is disabled (`onChange`
|
|
61
|
+
| disabled | Defines if the card is disabled (pointer-events disabled, `onChange` will not fire) | boolean | - |
|
|
62
62
|
| customTickVisible | Defines if the checkbox is custom | boolean | - |
|
|
63
63
|
| customTickVisibleComponent | Custom checkbox component | ReactNode | - |
|
|
64
64
|
| stretchToFit | Aligns the height of each card | boolean | - |
|
|
65
|
-
| theme |
|
|
65
|
+
| theme | **@deprecated** — injected by styled-components `withTheme`, do not pass manually | object | - |
|
|
66
|
+
| error | Shows a red outline on the card | boolean | - |
|
|
66
67
|
| elementsPosition | Defines the position of the elements on the card | `left` / `right` / `center` | `center` |
|
|
67
68
|
|
|
68
69
|
| tagProps | Defines a ribbon-style tag | `TagProps` | - |
|
|
@@ -82,7 +83,7 @@ Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'
|
|
|
82
83
|
| Property | Description | Type | Default |
|
|
83
84
|
| --------- | --------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------- |
|
|
84
85
|
| className | The name of the container | string | - |
|
|
85
|
-
| columns | Defines the number of columns.
|
|
86
|
+
| columns | Defines the number of columns. Set to null to render all items in a single row | number / null | `2` |
|
|
86
87
|
| children | Deprecated. Use items prop instead | ReactNode | - |
|
|
87
88
|
| items | Array of CardSelect props to render CardSelect child elements | CardSelectProps & { key: string / numer} | - |
|
|
88
89
|
| width | Defines the size of the gap between items. Deprecated, use size prop | `small` / `large` | 16px for `small`, 24px for `large` size |
|
package/dist/CardSelect.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
declare const _default: React.ForwardRefExoticComponent<{
|
|
3
3
|
className?: string | undefined;
|
|
4
4
|
title?: React.ReactNode;
|
|
@@ -7,18 +7,18 @@ declare const _default: React.ForwardRefExoticComponent<{
|
|
|
7
7
|
disabled?: boolean | undefined;
|
|
8
8
|
key?: React.Key | undefined;
|
|
9
9
|
value?: boolean | undefined;
|
|
10
|
-
size?: import(
|
|
10
|
+
size?: import('./CardSelect.types').CardSelectSizeType | undefined;
|
|
11
11
|
stretchToFit?: boolean | undefined;
|
|
12
12
|
error?: boolean | undefined;
|
|
13
13
|
raised?: boolean | undefined;
|
|
14
|
+
elementsPosition?: import('./CardSelect.types').CardSelectAlignType | undefined;
|
|
15
|
+
tickVisible?: boolean | undefined;
|
|
14
16
|
description?: React.ReactNode;
|
|
15
17
|
customTickVisible?: boolean | undefined;
|
|
16
18
|
customTickVisibleComponent?: React.ReactNode;
|
|
17
|
-
tickVisible?: boolean | undefined;
|
|
18
19
|
icon?: React.ReactNode;
|
|
19
20
|
iconSize?: number | undefined;
|
|
20
21
|
tickSize?: number | undefined;
|
|
21
|
-
elementsPosition?: import("./CardSelect.types").CardSelectAlignType | undefined;
|
|
22
22
|
tagProps?: {
|
|
23
23
|
[x: `data-${string}`]: string;
|
|
24
24
|
defaultChecked?: boolean | undefined | undefined;
|
|
@@ -293,10 +293,10 @@ declare const _default: React.ForwardRefExoticComponent<{
|
|
|
293
293
|
prefixel?: React.ReactNode;
|
|
294
294
|
suffixel?: React.ReactNode;
|
|
295
295
|
dashed?: boolean | undefined;
|
|
296
|
-
tooltipProps?: import(
|
|
296
|
+
tooltipProps?: import('@synerise/ds-tooltip').TooltipProps | undefined;
|
|
297
297
|
} | undefined;
|
|
298
|
-
tagTooltipProps?: import(
|
|
299
|
-
infoTooltipProps?: import(
|
|
298
|
+
tagTooltipProps?: import('@synerise/ds-tooltip').TooltipProps | undefined;
|
|
299
|
+
infoTooltipProps?: import('@synerise/ds-tooltip').TooltipProps | undefined;
|
|
300
300
|
} & {
|
|
301
301
|
theme?: any;
|
|
302
302
|
}>;
|
package/dist/CardSelect.js
CHANGED
|
@@ -1,118 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { withTheme } from
|
|
4
|
-
import { useTheme } from
|
|
5
|
-
import Icon, { Check3M, InfoFillS } from
|
|
6
|
-
import { TagShape } from
|
|
7
|
-
import Tooltip from
|
|
8
|
-
import { useOnClickOutside } from
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
setIsPressed = _useState[1];
|
|
40
|
-
var theme = useTheme();
|
|
41
|
-
var wrapperRef = useRef(null);
|
|
42
|
-
var tickIconRef = useRef(null);
|
|
43
|
-
var handleClick = function handleClick() {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef } from "react";
|
|
3
|
+
import { withTheme } from "styled-components";
|
|
4
|
+
import { useTheme } from "@synerise/ds-core";
|
|
5
|
+
import Icon, { Check3M, InfoFillS } from "@synerise/ds-icon";
|
|
6
|
+
import { TagShape } from "@synerise/ds-tag";
|
|
7
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
8
|
+
import { useOnClickOutside } from "@synerise/ds-utils";
|
|
9
|
+
import { TagRibbonAnchor, TagRibbon, CardWrapper, Container, Aside, TickIcon, RadioShape, Main, IconWrapper, Title, Description } from "./CardSelect.styles.js";
|
|
10
|
+
import { DEFAULT_TICK_SIZE_SMALL, DEFAULT_TICK_SIZE_LARGE, DEFAULT_ICON_SIZE_SMALL, DEFAULT_ICON_SIZE_LARGE } from "./constants.js";
|
|
11
|
+
const CardSelect = ({
|
|
12
|
+
title,
|
|
13
|
+
description,
|
|
14
|
+
customTickVisible,
|
|
15
|
+
customTickVisibleComponent,
|
|
16
|
+
tickVisible = true,
|
|
17
|
+
stretchToFit,
|
|
18
|
+
raised,
|
|
19
|
+
value = false,
|
|
20
|
+
size = "medium",
|
|
21
|
+
disabled,
|
|
22
|
+
onChange,
|
|
23
|
+
icon,
|
|
24
|
+
iconSize,
|
|
25
|
+
tickSize,
|
|
26
|
+
elementsPosition = "center",
|
|
27
|
+
className,
|
|
28
|
+
onClick,
|
|
29
|
+
error,
|
|
30
|
+
tagProps,
|
|
31
|
+
tagTooltipProps,
|
|
32
|
+
infoTooltipProps
|
|
33
|
+
}) => {
|
|
34
|
+
const [isPressed, setIsPressed] = useState(false);
|
|
35
|
+
const theme = useTheme();
|
|
36
|
+
const wrapperRef = useRef(null);
|
|
37
|
+
const tickIconRef = useRef(null);
|
|
38
|
+
const handleClick = () => {
|
|
44
39
|
onClick ? onClick() : onChange && onChange(!value);
|
|
45
40
|
setIsPressed(true);
|
|
46
|
-
setTimeout(
|
|
47
|
-
|
|
48
|
-
(_tickIconRef$current = tickIconRef.current) == null || _tickIconRef$current.blur();
|
|
41
|
+
setTimeout(() => {
|
|
42
|
+
tickIconRef.current?.blur();
|
|
49
43
|
});
|
|
50
44
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
})));
|
|
57
|
-
var tagElementWithTooltip = tagTooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tagTooltipProps, tagElement) : tagElement;
|
|
58
|
-
useOnClickOutside(wrapperRef, function () {
|
|
45
|
+
const realIconSize = iconSize || (size === "small" ? DEFAULT_ICON_SIZE_SMALL : DEFAULT_ICON_SIZE_LARGE);
|
|
46
|
+
const realTickSize = tickSize || (size === "small" ? DEFAULT_TICK_SIZE_SMALL : DEFAULT_TICK_SIZE_LARGE);
|
|
47
|
+
const tagElement = tagProps && /* @__PURE__ */ jsx(TagRibbonAnchor, { children: /* @__PURE__ */ jsx(TagRibbon, { ...tagProps, shape: TagShape.DEFAULT_SQUARE, asPill: true }) });
|
|
48
|
+
const tagElementWithTooltip = tagTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...tagTooltipProps, children: tagElement }) : tagElement;
|
|
49
|
+
useOnClickOutside(wrapperRef, () => {
|
|
59
50
|
isPressed && setIsPressed(false);
|
|
60
51
|
});
|
|
61
|
-
return
|
|
62
|
-
|
|
63
|
-
className:
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
stretchToFit: stretchToFit
|
|
81
|
-
}, /*#__PURE__*/React.createElement(S.Aside, {
|
|
82
|
-
size: size,
|
|
83
|
-
elementsPosition: elementsPosition,
|
|
84
|
-
tickVisible: tickVisible,
|
|
85
|
-
tabIndex: disabled ? undefined : 0,
|
|
86
|
-
ref: tickIconRef
|
|
87
|
-
}, tickVisible && /*#__PURE__*/React.createElement(S.TickIcon, {
|
|
88
|
-
className: "ds-card-select-tick",
|
|
89
|
-
disabled: disabled,
|
|
90
|
-
elementsPosition: elementsPosition,
|
|
91
|
-
selected: value && !disabled,
|
|
92
|
-
size: size
|
|
93
|
-
}, value ? /*#__PURE__*/React.createElement(Icon, {
|
|
94
|
-
size: realTickSize,
|
|
95
|
-
color: value ? theme.palette['green-600'] : theme.palette['grey-400'],
|
|
96
|
-
component: /*#__PURE__*/React.createElement(Check3M, null)
|
|
97
|
-
}) : /*#__PURE__*/React.createElement(S.RadioShape, {
|
|
98
|
-
size: size
|
|
99
|
-
})), infoTooltipProps && /*#__PURE__*/React.createElement(Tooltip, infoTooltipProps, /*#__PURE__*/React.createElement(Icon, {
|
|
100
|
-
component: /*#__PURE__*/React.createElement(InfoFillS, null),
|
|
101
|
-
color: theme.palette['grey-400']
|
|
102
|
-
}))), /*#__PURE__*/React.createElement(S.Main, null, icon && /*#__PURE__*/React.createElement(S.IconWrapper, {
|
|
103
|
-
size: size
|
|
104
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
105
|
-
component: icon,
|
|
106
|
-
size: realIconSize
|
|
107
|
-
})), title && /*#__PURE__*/React.createElement(S.Title, {
|
|
108
|
-
size: size,
|
|
109
|
-
hasIcon: !!icon
|
|
110
|
-
}, title), description && size !== 'small' && /*#__PURE__*/React.createElement(S.Description, {
|
|
111
|
-
size: size,
|
|
112
|
-
hasTitle: !!title,
|
|
113
|
-
hasIcon: !!icon
|
|
114
|
-
}, description)), customTickVisible && customTickVisibleComponent && /*#__PURE__*/React.createElement(S.Aside, {
|
|
115
|
-
size: size
|
|
116
|
-
}, customTickVisible && customTickVisibleComponent)));
|
|
52
|
+
return /* @__PURE__ */ jsxs(CardWrapper, { size, className: "ds-card-select-wrapper", disabled, stretchToFit, hasTick: tickVisible || customTickVisible, hasIcon: !!icon, elementsPosition, children: [
|
|
53
|
+
tagElementWithTooltip,
|
|
54
|
+
/* @__PURE__ */ jsxs(Container, { error: !!error, ref: wrapperRef, pressed: isPressed, raised, disabled, value, size, onClick: handleClick, className: `ds-card-select ${className || ""}`, elementsPosition, stretchToFit, children: [
|
|
55
|
+
/* @__PURE__ */ jsxs(Aside, { size, elementsPosition, tickVisible, tabIndex: disabled ? void 0 : 0, ref: tickIconRef, children: [
|
|
56
|
+
tickVisible && /* @__PURE__ */ jsx(TickIcon, { className: "ds-card-select-tick", disabled, elementsPosition, selected: value && !disabled, size, children: value ? /* @__PURE__ */ jsx(Icon, { size: realTickSize, color: value ? theme.palette["green-600"] : theme.palette["grey-400"], component: /* @__PURE__ */ jsx(Check3M, {}) }) : /* @__PURE__ */ jsx(RadioShape, { size }) }),
|
|
57
|
+
infoTooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...infoTooltipProps, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(InfoFillS, {}), color: theme.palette["grey-400"] }) })
|
|
58
|
+
] }),
|
|
59
|
+
/* @__PURE__ */ jsxs(Main, { children: [
|
|
60
|
+
icon && /* @__PURE__ */ jsx(IconWrapper, { size, children: /* @__PURE__ */ jsx(Icon, { component: icon, size: realIconSize }) }),
|
|
61
|
+
title && /* @__PURE__ */ jsx(Title, { size, hasIcon: !!icon, children: title }),
|
|
62
|
+
description && size !== "small" && /* @__PURE__ */ jsx(Description, { size, hasTitle: !!title, hasIcon: !!icon, children: description })
|
|
63
|
+
] }),
|
|
64
|
+
customTickVisible && customTickVisibleComponent && /* @__PURE__ */ jsx(Aside, { size, children: customTickVisible && customTickVisibleComponent })
|
|
65
|
+
] })
|
|
66
|
+
] });
|
|
67
|
+
};
|
|
68
|
+
const CardSelect$1 = withTheme(CardSelect);
|
|
69
|
+
export {
|
|
70
|
+
CardSelect$1 as default
|
|
117
71
|
};
|
|
118
|
-
export default withTheme(CardSelect);
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
export declare const RadioShape: import(
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ThemeProps } from '@synerise/ds-core';
|
|
3
|
+
import { CardSelectAlignType, CardSelectSizeType } from './CardSelect.types';
|
|
4
|
+
export declare const RadioShape: import('styled-components').StyledComponent<"div", any, {
|
|
5
5
|
size?: CardSelectSizeType;
|
|
6
6
|
}, never>;
|
|
7
|
-
export declare const Title: import(
|
|
7
|
+
export declare const Title: import('styled-components').StyledComponent<"div", any, {
|
|
8
8
|
hasIcon: boolean;
|
|
9
9
|
size?: CardSelectSizeType;
|
|
10
10
|
}, never>;
|
|
11
|
-
export declare const Description: import(
|
|
11
|
+
export declare const Description: import('styled-components').StyledComponent<"div", any, {
|
|
12
12
|
hasTitle?: boolean;
|
|
13
13
|
hasIcon?: boolean;
|
|
14
14
|
size?: CardSelectSizeType;
|
|
15
15
|
}, never>;
|
|
16
|
-
export declare const IconWrapper: import(
|
|
16
|
+
export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
17
17
|
size?: CardSelectSizeType;
|
|
18
18
|
}, never>;
|
|
19
|
-
export declare const Aside: import(
|
|
19
|
+
export declare const Aside: import('styled-components').StyledComponent<"div", any, {
|
|
20
20
|
size?: CardSelectSizeType;
|
|
21
21
|
elementsPosition?: CardSelectAlignType;
|
|
22
22
|
tickVisible?: boolean;
|
|
23
23
|
}, never>;
|
|
24
|
-
export declare const Container: import(
|
|
24
|
+
export declare const Container: import('styled-components').StyledComponent<"div", any, {
|
|
25
25
|
disabled?: boolean;
|
|
26
26
|
raised?: boolean;
|
|
27
27
|
value?: boolean;
|
|
@@ -32,14 +32,14 @@ export declare const Container: import("styled-components").StyledComponent<"div
|
|
|
32
32
|
stretchToFit?: boolean;
|
|
33
33
|
error?: boolean;
|
|
34
34
|
} & ThemeProps, never>;
|
|
35
|
-
export declare const TagRibbonAnchor: import(
|
|
36
|
-
export declare const TagRibbon: import(
|
|
35
|
+
export declare const TagRibbonAnchor: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
36
|
+
export declare const TagRibbon: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<{
|
|
37
37
|
id?: string | number;
|
|
38
38
|
name?: string;
|
|
39
39
|
textColor?: string;
|
|
40
40
|
color?: string;
|
|
41
41
|
image?: string;
|
|
42
|
-
shape?: import(
|
|
42
|
+
shape?: import('@synerise/ds-tag').TagShape;
|
|
43
43
|
removable?: boolean;
|
|
44
44
|
className?: string;
|
|
45
45
|
disabled?: boolean;
|
|
@@ -47,19 +47,19 @@ export declare const TagRibbon: import("styled-components").StyledComponent<Reac
|
|
|
47
47
|
onRemove?: (tag: string | number) => void;
|
|
48
48
|
prefixel?: React.ReactNode;
|
|
49
49
|
suffixel?: React.ReactNode;
|
|
50
|
-
texts?: import(
|
|
50
|
+
texts?: import('@synerise/ds-tag').TagTexts;
|
|
51
51
|
asPill?: boolean;
|
|
52
52
|
dashed?: boolean;
|
|
53
|
-
tooltipProps?: import(
|
|
54
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "id" | "color" | "onClick" | "name" | "textColor" | "image" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import(
|
|
55
|
-
export declare const Main: import(
|
|
56
|
-
export declare const TickIcon: import(
|
|
53
|
+
tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
|
|
54
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "id" | "color" | "onClick" | "name" | "textColor" | "image" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
55
|
+
export declare const Main: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
56
|
+
export declare const TickIcon: import('styled-components').StyledComponent<"div", any, {
|
|
57
57
|
size?: CardSelectSizeType;
|
|
58
58
|
disabled?: boolean;
|
|
59
59
|
selected?: boolean;
|
|
60
60
|
elementsPosition: CardSelectAlignType;
|
|
61
61
|
}, never>;
|
|
62
|
-
export declare const CardWrapper: import(
|
|
62
|
+
export declare const CardWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
63
63
|
size?: CardSelectSizeType;
|
|
64
64
|
disabled?: boolean;
|
|
65
65
|
stretchToFit?: boolean;
|
|
@@ -1,128 +1,156 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import is, { isNot } from "styled-is";
|
|
3
|
+
import Tag from "@synerise/ds-tag";
|
|
4
|
+
const TRANSITION = `
|
|
5
|
+
TRANSITION-timing-function: ease-in-out;
|
|
6
|
+
transition-duration: 0.2s;
|
|
7
|
+
transition-property: border-color, background-color;
|
|
8
|
+
`;
|
|
9
|
+
const MAIN_PADDING = 8;
|
|
10
|
+
const RADIO_WIDTH = 20;
|
|
11
|
+
const RADIO_SMALL_WIDTH = 16;
|
|
12
|
+
const RADIO_BORDER_WIDTH = 1;
|
|
13
|
+
const TAG_LEFT_OFFSET = 32;
|
|
14
|
+
const TAG_LEFT_OFFSET_TICK_SMALL = 44;
|
|
15
|
+
const TAG_LEFT_OFFSET_TICK_LARGE = 68;
|
|
16
|
+
const MAP_ELEMENTS_POSITION = {
|
|
17
|
+
left: "flex-start",
|
|
18
|
+
right: "flex-end",
|
|
19
|
+
center: "center"
|
|
18
20
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
var getTransformValues = function getTransformValues(props) {
|
|
25
|
-
if (props.size === 'small') {
|
|
26
|
-
return 'translate(-2px,-2px)';
|
|
21
|
+
const getVar = (name) => (props) => props.theme.palette[name];
|
|
22
|
+
const getTransformValues = (props) => {
|
|
23
|
+
if (props.size === "small") {
|
|
24
|
+
return "translate(-2px,-2px)";
|
|
27
25
|
}
|
|
28
|
-
if (props.elementsPosition ===
|
|
29
|
-
return
|
|
26
|
+
if (props.elementsPosition === "left") {
|
|
27
|
+
return "translate(3px,-3px)";
|
|
30
28
|
}
|
|
31
|
-
return
|
|
32
|
-
};
|
|
33
|
-
var sizeCondition = function sizeCondition(smallValue, mediumValue, props) {
|
|
34
|
-
return props.size === 'small' ? smallValue : mediumValue;
|
|
29
|
+
return "translate( -3px, -3px)";
|
|
35
30
|
};
|
|
36
|
-
|
|
31
|
+
const sizeCondition = (smallValue, mediumValue, props) => props.size === "small" ? smallValue : mediumValue;
|
|
32
|
+
const RadioShape = /* @__PURE__ */ styled.div.withConfig({
|
|
37
33
|
displayName: "CardSelectstyles__RadioShape",
|
|
38
34
|
componentId: "sc-tfmgtj-0"
|
|
39
|
-
})(["", ";width:", "px;height:", "px;border-radius:50%;border-width:", "px;border-style:solid;border-color:", ";margin:2px;&:hover{border-color:", ";}"], TRANSITION,
|
|
40
|
-
|
|
41
|
-
}, function (props) {
|
|
42
|
-
return sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props);
|
|
43
|
-
}, RADIO_BORDER_WIDTH, getVar('grey-300'), getVar('grey-400'));
|
|
44
|
-
export var Title = styled.div.withConfig({
|
|
35
|
+
})(["", ";width:", "px;height:", "px;border-radius:50%;border-width:", "px;border-style:solid;border-color:", ";margin:2px;&:hover{border-color:", ";}"], TRANSITION, (props) => sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props), (props) => sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props), RADIO_BORDER_WIDTH, getVar("grey-300"), getVar("grey-400"));
|
|
36
|
+
const Title = /* @__PURE__ */ styled.div.withConfig({
|
|
45
37
|
displayName: "CardSelectstyles__Title",
|
|
46
38
|
componentId: "sc-tfmgtj-1"
|
|
47
|
-
})(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ""], getVar(
|
|
48
|
-
|
|
49
|
-
}, function (props) {
|
|
50
|
-
return sizeCondition('13px', '14px', props);
|
|
51
|
-
}, function (props) {
|
|
52
|
-
return props.size === 'small' && props.hasIcon && css(["margin-top:4px;"]);
|
|
53
|
-
});
|
|
54
|
-
export var Description = styled.div.withConfig({
|
|
39
|
+
})(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ""], getVar("grey-800"), (props) => sizeCondition("400", "500", props), (props) => sizeCondition("13px", "14px", props), (props) => props.size === "small" && props.hasIcon && css(["margin-top:4px;"]));
|
|
40
|
+
const Description = /* @__PURE__ */ styled.div.withConfig({
|
|
55
41
|
displayName: "CardSelectstyles__Description",
|
|
56
42
|
componentId: "sc-tfmgtj-2"
|
|
57
|
-
})(["&&{font-size:13px;text-align:center;max-width:176px;word-wrap:break-word;overflow-wrap:break-word;flex-grow:1;", ";}"],
|
|
58
|
-
|
|
59
|
-
});
|
|
60
|
-
export var IconWrapper = styled.div.withConfig({
|
|
43
|
+
})(["&&{font-size:13px;text-align:center;max-width:176px;word-wrap:break-word;overflow-wrap:break-word;flex-grow:1;", ";}"], (props) => props.hasTitle && css(["margin-top:8px;"]));
|
|
44
|
+
const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
61
45
|
displayName: "CardSelectstyles__IconWrapper",
|
|
62
46
|
componentId: "sc-tfmgtj-3"
|
|
63
|
-
})(["margin-bottom:", "px;text-align:center;width:100%;"],
|
|
64
|
-
|
|
65
|
-
});
|
|
66
|
-
export var Aside = styled.div.withConfig({
|
|
47
|
+
})(["margin-bottom:", "px;text-align:center;width:100%;"], (props) => sizeCondition(0, MAIN_PADDING, props));
|
|
48
|
+
const Aside = /* @__PURE__ */ styled.div.withConfig({
|
|
67
49
|
displayName: "CardSelectstyles__Aside",
|
|
68
50
|
componentId: "sc-tfmgtj-4"
|
|
69
|
-
})(["width:100%;justify-content:", ";top:0;left:0;display:flex;flex-direction:", ";position:absolute;padding:", ";"],
|
|
70
|
-
|
|
71
|
-
}, function (props) {
|
|
72
|
-
return props.elementsPosition === 'left' ? 'row-reverse' : 'row';
|
|
73
|
-
}, function (props) {
|
|
74
|
-
return sizeCondition('4px', '14px', props);
|
|
75
|
-
});
|
|
76
|
-
export var Container = styled.div.withConfig({
|
|
51
|
+
})(["width:100%;justify-content:", ";top:0;left:0;display:flex;flex-direction:", ";position:absolute;padding:", ";"], (props) => props.tickVisible ? "space-between" : "flex-end", (props) => props.elementsPosition === "left" ? "row-reverse" : "row", (props) => sizeCondition("4px", "14px", props));
|
|
52
|
+
const Container = /* @__PURE__ */ styled.div.withConfig({
|
|
77
53
|
displayName: "CardSelectstyles__Container",
|
|
78
54
|
componentId: "sc-tfmgtj-5"
|
|
79
|
-
})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is(
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
|
|
55
|
+
})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is("stretchToFit")`
|
|
56
|
+
height: 100%;
|
|
57
|
+
`, TRANSITION, getVar("white"), (props) => props.theme.variable("@border-radius-base"), is("error")`
|
|
58
|
+
&&, &&:hover {
|
|
59
|
+
box-shadow: 0px 0px 0px 2px ${getVar("red-500")};
|
|
60
|
+
}
|
|
61
|
+
`, (props) => MAP_ELEMENTS_POSITION[props.elementsPosition], getVar("white"), (props) => props.size === "small" ? "16px" : "24px", getVar("blue-600"), isNot("pressed") && isNot("value")`box-shadow: 0px 0px 0px 1px ${getVar("grey-300")};`, is("value")`
|
|
62
|
+
box-shadow: 0px 0px 0px 2px ${getVar("blue-600")};
|
|
63
|
+
`, is("value") && is("pressed")` box-shadow: 0px 0px 0px 2px ${getVar("blue-600")};`, is("value") && is("raised")`
|
|
64
|
+
box-shadow: 0px 0px 0px 2px ${getVar("blue-600")};
|
|
65
|
+
`, is("value") && is("pressed")` box-shadow: 0px 0px 0px 2px ${getVar("blue-600")};`, Title, Description, IconWrapper, (props) => props.elementsPosition, IconWrapper, (props) => props.elementsPosition === "left" ? "-18px" : "0px", (props) => props.elementsPosition === "right" ? "-18px" : "0px", isNot("disabled")`
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
${RadioShape} {
|
|
70
|
+
border-color: ${getVar("grey-400")};
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
${isNot("raised")`
|
|
75
|
+
${isNot("value")`
|
|
76
|
+
box-shadow: 0px 0px 0px 1px ${getVar("grey-300")};
|
|
77
|
+
|
|
78
|
+
&:hover, &:active {
|
|
79
|
+
box-shadow: 0px 0px 0px 1px ${getVar("grey-400")};
|
|
80
|
+
}
|
|
81
|
+
`};
|
|
82
|
+
`};
|
|
83
|
+
|
|
84
|
+
${is("raised")`
|
|
85
|
+
${isNot("value")`
|
|
86
|
+
box-shadow: ${(props) => props.theme.variable("@box-shadow-base") || "none"};
|
|
87
|
+
|
|
88
|
+
&:hover, &:active {
|
|
89
|
+
box-shadow: ${(props) => props.theme.variable("@box-shadow-active") || "none"};
|
|
90
|
+
}
|
|
91
|
+
`}
|
|
92
|
+
|
|
93
|
+
`}
|
|
94
|
+
`, is("disabled")`
|
|
95
|
+
opacity: 0.4;
|
|
96
|
+
pointer-events:none;
|
|
97
|
+
|
|
98
|
+
${isNot("raised")`
|
|
99
|
+
|
|
100
|
+
${isNot("value")`
|
|
101
|
+
box-shadow: 0px 0px 0px 1px ${getVar("grey-200")};
|
|
102
|
+
`}
|
|
103
|
+
`}
|
|
104
|
+
|
|
105
|
+
`);
|
|
106
|
+
const TagRibbonAnchor = /* @__PURE__ */ styled.div.withConfig({
|
|
97
107
|
displayName: "CardSelectstyles__TagRibbonAnchor",
|
|
98
108
|
componentId: "sc-tfmgtj-6"
|
|
99
109
|
})(["display:flex;height:0;overflow:visible;"]);
|
|
100
|
-
|
|
110
|
+
const TagRibbon = /* @__PURE__ */ styled(Tag).withConfig({
|
|
101
111
|
displayName: "CardSelectstyles__TagRibbon",
|
|
102
112
|
componentId: "sc-tfmgtj-7"
|
|
103
113
|
})(["position:relative;z-index:1;top:-12px;margin:0;"]);
|
|
104
|
-
|
|
114
|
+
const Main = /* @__PURE__ */ styled.div.withConfig({
|
|
105
115
|
displayName: "CardSelectstyles__Main",
|
|
106
116
|
componentId: "sc-tfmgtj-8"
|
|
107
117
|
})(["display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:flex-start;"]);
|
|
108
|
-
|
|
118
|
+
const TickIcon = /* @__PURE__ */ styled.div.withConfig({
|
|
109
119
|
displayName: "CardSelectstyles__TickIcon",
|
|
110
120
|
componentId: "sc-tfmgtj-9"
|
|
111
|
-
})(["", " ", " ", ""], is(
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
121
|
+
})(["", " ", " ", ""], is("selected")`
|
|
122
|
+
transform: ${(props) => getTransformValues(props)};
|
|
123
|
+
`, is("disabled")`
|
|
124
|
+
${RadioShape} {
|
|
125
|
+
background-color: ${getVar("grey-050")};
|
|
126
|
+
border-color: ${getVar("grey-200")};
|
|
127
|
+
}
|
|
128
|
+
`, isNot("disabled")`
|
|
129
|
+
${RadioShape} {
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
}
|
|
132
|
+
`);
|
|
133
|
+
const CardWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
115
134
|
displayName: "CardSelectstyles__CardWrapper",
|
|
116
135
|
componentId: "sc-tfmgtj-10"
|
|
117
|
-
})(["position:relative;", " ", " ", "{", "}", "{justify-content:", ";padding-", ":", "px;}", "{", ":16px;}"], is(
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}, function (props) {
|
|
124
|
-
var withTickOffset = props.size === 'small' ? TAG_LEFT_OFFSET_TICK_SMALL : TAG_LEFT_OFFSET_TICK_LARGE;
|
|
136
|
+
})(["position:relative;", " ", " ", "{", "}", "{justify-content:", ";padding-", ":", "px;}", "{", ":16px;}"], is("disabled")`
|
|
137
|
+
cursor:not-allowed;
|
|
138
|
+
`, is("stretchToFit")`
|
|
139
|
+
height: 100%;
|
|
140
|
+
`, Title, (props) => props.hasTick && !props.hasIcon && css(["padding:0 24px;"]), TagRibbonAnchor, (props) => props.elementsPosition === "right" ? "flex-start" : "flex-end", (props) => props.elementsPosition === "left" ? "right" : "left", (props) => {
|
|
141
|
+
const withTickOffset = props.size === "small" ? TAG_LEFT_OFFSET_TICK_SMALL : TAG_LEFT_OFFSET_TICK_LARGE;
|
|
125
142
|
return props.hasTick ? withTickOffset : TAG_LEFT_OFFSET;
|
|
126
|
-
}, TagRibbon,
|
|
127
|
-
|
|
128
|
-
|
|
143
|
+
}, TagRibbon, (props) => props.elementsPosition === "left" ? "left" : "right");
|
|
144
|
+
export {
|
|
145
|
+
Aside,
|
|
146
|
+
CardWrapper,
|
|
147
|
+
Container,
|
|
148
|
+
Description,
|
|
149
|
+
IconWrapper,
|
|
150
|
+
Main,
|
|
151
|
+
RadioShape,
|
|
152
|
+
TagRibbon,
|
|
153
|
+
TagRibbonAnchor,
|
|
154
|
+
TickIcon,
|
|
155
|
+
Title
|
|
156
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { Key, ReactNode } from 'react';
|
|
2
|
+
import { TagProps } from '@synerise/ds-tag';
|
|
3
|
+
import { TooltipProps } from '@synerise/ds-tooltip';
|
|
4
4
|
type CardSelectTagProps = Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>;
|
|
5
5
|
export type CardSelectAlignType = 'left' | 'center' | 'right';
|
|
6
6
|
export type CardSelectSizeType = 'small' | 'medium';
|
package/dist/CardSelect.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CardSelectGroupProps } from './CardSelectGroup.types';
|
|
3
3
|
declare const CardSelectGroup: ({ className, children, items, size, width, columns, }: CardSelectGroupProps) => React.JSX.Element;
|
|
4
4
|
export default CardSelectGroup;
|
|
@@ -1,29 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import CardSelect from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
columns: columns,
|
|
21
|
-
itemsCount: cardsCount
|
|
22
|
-
}, items ? items.map(function (item) {
|
|
23
|
-
return /*#__PURE__*/React.createElement(CardSelect, _extends({}, item, {
|
|
24
|
-
key: item.key,
|
|
25
|
-
size: size || item.size
|
|
26
|
-
}));
|
|
27
|
-
}) : children);
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Children, createElement } from "react";
|
|
3
|
+
import CardSelect from "../CardSelect.js";
|
|
4
|
+
import { CardSelectGroupWrapper } from "./CardSelectGroup.styles.js";
|
|
5
|
+
const DEFAULT_COLUMNS = 2;
|
|
6
|
+
const DEFAULT_SIZE = "large";
|
|
7
|
+
const CardSelectGroup = ({
|
|
8
|
+
className,
|
|
9
|
+
children,
|
|
10
|
+
items,
|
|
11
|
+
size,
|
|
12
|
+
width = DEFAULT_SIZE,
|
|
13
|
+
columns = DEFAULT_COLUMNS
|
|
14
|
+
}) => {
|
|
15
|
+
const cardsCount = items?.length || Children.toArray(children).length;
|
|
16
|
+
return /* @__PURE__ */ jsx(CardSelectGroupWrapper, { className, size: size || width, columns, itemsCount: cardsCount, children: items ? items.map((item) => /* @__PURE__ */ createElement(CardSelect, { ...item, key: item.key, size: size || item.size })) : children });
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
CardSelectGroup as default
|
|
28
20
|
};
|
|
29
|
-
export default CardSelectGroup;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export declare const CardSelectGroupWrapper: import(
|
|
1
|
+
export declare const CardSelectGroupWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
2
2
|
itemsCount?: number;
|
|
3
3
|
size: "small" | "medium" | "large";
|
|
4
4
|
columns: number | null;
|
|
5
5
|
}, never>;
|
|
6
|
-
export declare const CardGroup: import(
|
|
6
|
+
export declare const CardGroup: import('styled-components').StyledComponent<"div", any, {
|
|
7
7
|
itemsCount?: number;
|
|
8
8
|
size: "small" | "medium" | "large";
|
|
9
9
|
columns: number | null;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const CardSelectGroupWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "CardSelectGroupstyles__CardSelectGroupWrapper",
|
|
4
4
|
componentId: "sc-1xnksbf-0"
|
|
5
|
-
})(["padding:24px;display:grid;grid-template-columns:", ";gap:", ";"],
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
// @deprecated - use CardSelectGroupWrapper instead
|
|
12
|
-
export var CardGroup = CardSelectGroupWrapper;
|
|
5
|
+
})(["padding:24px;display:grid;grid-template-columns:", ";gap:", ";"], (props) => new Array(props.columns || props.itemsCount).fill("1fr").join(" "), (props) => props.size === "small" ? "16px" : "24px");
|
|
6
|
+
const CardGroup = CardSelectGroupWrapper;
|
|
7
|
+
export {
|
|
8
|
+
CardGroup,
|
|
9
|
+
CardSelectGroupWrapper
|
|
10
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { Key, ReactNode } from 'react';
|
|
2
|
+
import { CardSelectProps } from '../CardSelect.types';
|
|
3
3
|
type CardSelectPropsWithKey = Omit<CardSelectProps, 'key'> & {
|
|
4
4
|
key: Key;
|
|
5
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/constants.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
const DEFAULT_TICK_SIZE_SMALL = 24;
|
|
2
|
+
const DEFAULT_TICK_SIZE_LARGE = 30;
|
|
3
|
+
const DEFAULT_ICON_SIZE_SMALL = 48;
|
|
4
|
+
const DEFAULT_ICON_SIZE_LARGE = 96;
|
|
5
|
+
export {
|
|
6
|
+
DEFAULT_ICON_SIZE_LARGE,
|
|
7
|
+
DEFAULT_ICON_SIZE_SMALL,
|
|
8
|
+
DEFAULT_TICK_SIZE_LARGE,
|
|
9
|
+
DEFAULT_TICK_SIZE_SMALL
|
|
10
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { default as default2 } from "./CardSelect.js";
|
|
2
|
+
import { default as default3 } from "./CardSelectGroup/CardSelectGroup.js";
|
|
3
|
+
export {
|
|
4
|
+
default3 as CardSelectGroup,
|
|
5
|
+
default2 as default
|
|
6
|
+
};
|
package/dist/modules.d.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare module 'styled-is';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-card-select",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.42",
|
|
4
4
|
"description": "Card-Select UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
26
|
-
"test": "vitest",
|
|
27
|
-
"test:watch": "
|
|
26
|
+
"test": "vitest run",
|
|
27
|
+
"test:watch": "vitest",
|
|
28
28
|
"types": "tsc --noEmit",
|
|
29
29
|
"check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
|
|
30
30
|
"upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-icon": "^1.
|
|
39
|
-
"@synerise/ds-tag": "^1.4.
|
|
40
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
41
|
-
"@synerise/ds-utils": "^1.
|
|
38
|
+
"@synerise/ds-icon": "^1.15.1",
|
|
39
|
+
"@synerise/ds-tag": "^1.4.18",
|
|
40
|
+
"@synerise/ds-tooltip": "^1.4.10",
|
|
41
|
+
"@synerise/ds-utils": "^1.7.1",
|
|
42
42
|
"styled-is": "^1.3.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"styled-components": "^5.3.3",
|
|
49
49
|
"vitest": "4"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
52
52
|
}
|