@clickhouse/click-ui 0.0.181 → 0.0.183
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/click-ui.es.js +41 -2
- package/dist/click-ui.umd.js +41 -2
- package/dist/components/CardHorizontal/CardHorizontal.d.ts +6 -2
- package/dist/styles/types.d.ts +8 -0
- package/dist/styles/variables.classic.json.d.ts +8 -0
- package/dist/styles/variables.dark.json.d.ts +8 -0
- package/dist/styles/variables.json.d.ts +8 -0
- package/dist/styles/variables.light.json.d.ts +8 -0
- package/package.json +1 -1
package/dist/click-ui.es.js
CHANGED
|
@@ -9959,7 +9959,7 @@ const Card = ({
|
|
|
9959
9959
|
const CardPrimary = withTopBadge(Card);
|
|
9960
9960
|
const Header$2 = styled.div.withConfig({
|
|
9961
9961
|
componentId: "sc-1qnbjoa-0"
|
|
9962
|
-
})(["
|
|
9962
|
+
})(["max-width:100%;gap:inherit;"]);
|
|
9963
9963
|
const Description = styled.div.withConfig({
|
|
9964
9964
|
componentId: "sc-1qnbjoa-1"
|
|
9965
9965
|
})(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
|
|
@@ -10043,12 +10043,19 @@ const CardHorizontal = ({
|
|
|
10043
10043
|
isSelected,
|
|
10044
10044
|
children,
|
|
10045
10045
|
color = "default",
|
|
10046
|
+
badgeText,
|
|
10047
|
+
badgeState,
|
|
10048
|
+
badgeIcon,
|
|
10049
|
+
badgeIconDir,
|
|
10046
10050
|
...props
|
|
10047
10051
|
}) => {
|
|
10048
10052
|
return /* @__PURE__ */ jsxs(Wrapper$7, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
|
|
10049
10053
|
icon && /* @__PURE__ */ jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
|
|
10050
10054
|
/* @__PURE__ */ jsxs(ContentWrapper, { children: [
|
|
10051
|
-
title && /* @__PURE__ */
|
|
10055
|
+
title && /* @__PURE__ */ jsxs(Header$2, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
|
|
10056
|
+
/* @__PURE__ */ jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
|
|
10057
|
+
badgeText && /* @__PURE__ */ jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
|
|
10058
|
+
] }),
|
|
10052
10059
|
description && /* @__PURE__ */ jsx(Description, { children: description }),
|
|
10053
10060
|
children && /* @__PURE__ */ jsx(Description, { children })
|
|
10054
10061
|
] })
|
|
@@ -42663,6 +42670,10 @@ const click$3 = {
|
|
|
42663
42670
|
teal: "#089B83",
|
|
42664
42671
|
sunrise: "#FFC300",
|
|
42665
42672
|
slate: "#9a9ea7"
|
|
42673
|
+
},
|
|
42674
|
+
label: {
|
|
42675
|
+
"default": "#161517",
|
|
42676
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
42666
42677
|
}
|
|
42667
42678
|
}
|
|
42668
42679
|
},
|
|
@@ -42760,6 +42771,10 @@ const global$4 = {
|
|
|
42760
42771
|
sunrise: "#FFC300",
|
|
42761
42772
|
slate: "#9a9ea7",
|
|
42762
42773
|
red: "#ff2323"
|
|
42774
|
+
},
|
|
42775
|
+
label: {
|
|
42776
|
+
"default": "#161517",
|
|
42777
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
42763
42778
|
}
|
|
42764
42779
|
},
|
|
42765
42780
|
iconButton: {
|
|
@@ -44398,6 +44413,10 @@ const click$2 = {
|
|
|
44398
44413
|
teal: "#6DF8E1",
|
|
44399
44414
|
sunrise: "#FFC300",
|
|
44400
44415
|
slate: "#9a9ea7"
|
|
44416
|
+
},
|
|
44417
|
+
label: {
|
|
44418
|
+
"default": "#ffffff",
|
|
44419
|
+
deselected: "lch(100 0 0 / 0.3)"
|
|
44401
44420
|
}
|
|
44402
44421
|
}
|
|
44403
44422
|
},
|
|
@@ -44495,6 +44514,10 @@ const global$3 = {
|
|
|
44495
44514
|
teal: "#6DF8E1",
|
|
44496
44515
|
sunrise: "#FFC300",
|
|
44497
44516
|
slate: "#9a9ea7"
|
|
44517
|
+
},
|
|
44518
|
+
label: {
|
|
44519
|
+
"default": "#ffffff",
|
|
44520
|
+
deselected: "lch(100 0 0 / 0.3)"
|
|
44498
44521
|
}
|
|
44499
44522
|
},
|
|
44500
44523
|
iconButton: {
|
|
@@ -46123,6 +46146,10 @@ const click$1 = {
|
|
|
46123
46146
|
teal: "#089B83",
|
|
46124
46147
|
sunrise: "#FFC300",
|
|
46125
46148
|
slate: "#9a9ea7"
|
|
46149
|
+
},
|
|
46150
|
+
label: {
|
|
46151
|
+
"default": "#161517",
|
|
46152
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
46126
46153
|
}
|
|
46127
46154
|
}
|
|
46128
46155
|
},
|
|
@@ -46221,6 +46248,10 @@ const global$2 = {
|
|
|
46221
46248
|
sunrise: "#FFC300",
|
|
46222
46249
|
slate: "#9a9ea7",
|
|
46223
46250
|
red: "#ff2323"
|
|
46251
|
+
},
|
|
46252
|
+
label: {
|
|
46253
|
+
"default": "#161517",
|
|
46254
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
46224
46255
|
}
|
|
46225
46256
|
},
|
|
46226
46257
|
iconButton: {
|
|
@@ -49259,6 +49290,10 @@ const click = {
|
|
|
49259
49290
|
teal: "#089B83",
|
|
49260
49291
|
sunrise: "#FFC300",
|
|
49261
49292
|
slate: "#9a9ea7"
|
|
49293
|
+
},
|
|
49294
|
+
label: {
|
|
49295
|
+
"default": "#161517",
|
|
49296
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
49262
49297
|
}
|
|
49263
49298
|
}
|
|
49264
49299
|
},
|
|
@@ -49398,6 +49433,10 @@ const global$1 = {
|
|
|
49398
49433
|
sunrise: "#FFC300",
|
|
49399
49434
|
slate: "#9a9ea7",
|
|
49400
49435
|
red: "#ff2323"
|
|
49436
|
+
},
|
|
49437
|
+
label: {
|
|
49438
|
+
"default": "#161517",
|
|
49439
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
49401
49440
|
}
|
|
49402
49441
|
},
|
|
49403
49442
|
iconButton: {
|
package/dist/click-ui.umd.js
CHANGED
|
@@ -9975,7 +9975,7 @@ var __publicField = (obj, key, value) => {
|
|
|
9975
9975
|
const CardPrimary = withTopBadge(Card);
|
|
9976
9976
|
const Header$2 = styledComponents.styled.div.withConfig({
|
|
9977
9977
|
componentId: "sc-1qnbjoa-0"
|
|
9978
|
-
})(["
|
|
9978
|
+
})(["max-width:100%;gap:inherit;"]);
|
|
9979
9979
|
const Description = styledComponents.styled.div.withConfig({
|
|
9980
9980
|
componentId: "sc-1qnbjoa-1"
|
|
9981
9981
|
})(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
|
|
@@ -10059,12 +10059,19 @@ var __publicField = (obj, key, value) => {
|
|
|
10059
10059
|
isSelected,
|
|
10060
10060
|
children,
|
|
10061
10061
|
color = "default",
|
|
10062
|
+
badgeText,
|
|
10063
|
+
badgeState,
|
|
10064
|
+
badgeIcon,
|
|
10065
|
+
badgeIconDir,
|
|
10062
10066
|
...props
|
|
10063
10067
|
}) => {
|
|
10064
10068
|
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$7, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
|
|
10065
10069
|
icon && /* @__PURE__ */ jsxRuntime.jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
|
|
10066
10070
|
/* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
|
|
10067
|
-
title && /* @__PURE__ */ jsxRuntime.
|
|
10071
|
+
title && /* @__PURE__ */ jsxRuntime.jsxs(Header$2, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
|
|
10072
|
+
/* @__PURE__ */ jsxRuntime.jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
|
|
10073
|
+
badgeText && /* @__PURE__ */ jsxRuntime.jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
|
|
10074
|
+
] }),
|
|
10068
10075
|
description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
|
|
10069
10076
|
children && /* @__PURE__ */ jsxRuntime.jsx(Description, { children })
|
|
10070
10077
|
] })
|
|
@@ -42679,6 +42686,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
42679
42686
|
teal: "#089B83",
|
|
42680
42687
|
sunrise: "#FFC300",
|
|
42681
42688
|
slate: "#9a9ea7"
|
|
42689
|
+
},
|
|
42690
|
+
label: {
|
|
42691
|
+
"default": "#161517",
|
|
42692
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
42682
42693
|
}
|
|
42683
42694
|
}
|
|
42684
42695
|
},
|
|
@@ -42776,6 +42787,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
42776
42787
|
sunrise: "#FFC300",
|
|
42777
42788
|
slate: "#9a9ea7",
|
|
42778
42789
|
red: "#ff2323"
|
|
42790
|
+
},
|
|
42791
|
+
label: {
|
|
42792
|
+
"default": "#161517",
|
|
42793
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
42779
42794
|
}
|
|
42780
42795
|
},
|
|
42781
42796
|
iconButton: {
|
|
@@ -44414,6 +44429,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
44414
44429
|
teal: "#6DF8E1",
|
|
44415
44430
|
sunrise: "#FFC300",
|
|
44416
44431
|
slate: "#9a9ea7"
|
|
44432
|
+
},
|
|
44433
|
+
label: {
|
|
44434
|
+
"default": "#ffffff",
|
|
44435
|
+
deselected: "lch(100 0 0 / 0.3)"
|
|
44417
44436
|
}
|
|
44418
44437
|
}
|
|
44419
44438
|
},
|
|
@@ -44511,6 +44530,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
44511
44530
|
teal: "#6DF8E1",
|
|
44512
44531
|
sunrise: "#FFC300",
|
|
44513
44532
|
slate: "#9a9ea7"
|
|
44533
|
+
},
|
|
44534
|
+
label: {
|
|
44535
|
+
"default": "#ffffff",
|
|
44536
|
+
deselected: "lch(100 0 0 / 0.3)"
|
|
44514
44537
|
}
|
|
44515
44538
|
},
|
|
44516
44539
|
iconButton: {
|
|
@@ -46139,6 +46162,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
46139
46162
|
teal: "#089B83",
|
|
46140
46163
|
sunrise: "#FFC300",
|
|
46141
46164
|
slate: "#9a9ea7"
|
|
46165
|
+
},
|
|
46166
|
+
label: {
|
|
46167
|
+
"default": "#161517",
|
|
46168
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
46142
46169
|
}
|
|
46143
46170
|
}
|
|
46144
46171
|
},
|
|
@@ -46237,6 +46264,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
46237
46264
|
sunrise: "#FFC300",
|
|
46238
46265
|
slate: "#9a9ea7",
|
|
46239
46266
|
red: "#ff2323"
|
|
46267
|
+
},
|
|
46268
|
+
label: {
|
|
46269
|
+
"default": "#161517",
|
|
46270
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
46240
46271
|
}
|
|
46241
46272
|
},
|
|
46242
46273
|
iconButton: {
|
|
@@ -49275,6 +49306,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
49275
49306
|
teal: "#089B83",
|
|
49276
49307
|
sunrise: "#FFC300",
|
|
49277
49308
|
slate: "#9a9ea7"
|
|
49309
|
+
},
|
|
49310
|
+
label: {
|
|
49311
|
+
"default": "#161517",
|
|
49312
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
49278
49313
|
}
|
|
49279
49314
|
}
|
|
49280
49315
|
},
|
|
@@ -49414,6 +49449,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
49414
49449
|
sunrise: "#FFC300",
|
|
49415
49450
|
slate: "#9a9ea7",
|
|
49416
49451
|
red: "#ff2323"
|
|
49452
|
+
},
|
|
49453
|
+
label: {
|
|
49454
|
+
"default": "#161517",
|
|
49455
|
+
deselected: "lch(6.94 1.44 305 / 0.3)"
|
|
49417
49456
|
}
|
|
49418
49457
|
},
|
|
49419
49458
|
iconButton: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { IconName } from '..';
|
|
2
|
+
import { BadgeState, HorizontalDirection, IconName } from '..';
|
|
3
3
|
|
|
4
4
|
type CardColor = "default" | "muted";
|
|
5
5
|
export interface CardHorizontalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
@@ -10,6 +10,10 @@ export interface CardHorizontalProps extends Omit<HTMLAttributes<HTMLDivElement>
|
|
|
10
10
|
isSelected?: boolean;
|
|
11
11
|
children?: ReactNode;
|
|
12
12
|
color?: CardColor;
|
|
13
|
+
badgeText?: string;
|
|
14
|
+
badgeState?: BadgeState;
|
|
15
|
+
badgeIcon?: IconName;
|
|
16
|
+
badgeIconDir?: HorizontalDirection;
|
|
13
17
|
}
|
|
14
|
-
export declare const CardHorizontal: ({ title, icon, description, disabled, isSelected, children, color, ...props }: CardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const CardHorizontal: ({ title, icon, description, disabled, isSelected, children, color, badgeText, badgeState, badgeIcon, badgeIconDir, ...props }: CardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
19
|
export {};
|
package/dist/styles/types.d.ts
CHANGED
|
@@ -3013,6 +3013,10 @@ export interface Theme {
|
|
|
3013
3013
|
"sunrise": string;
|
|
3014
3014
|
"slate": string;
|
|
3015
3015
|
};
|
|
3016
|
+
"label": {
|
|
3017
|
+
"default": string;
|
|
3018
|
+
"deselected": string;
|
|
3019
|
+
};
|
|
3016
3020
|
};
|
|
3017
3021
|
};
|
|
3018
3022
|
"serviceCard": {
|
|
@@ -3152,6 +3156,10 @@ export interface Theme {
|
|
|
3152
3156
|
"slate": string;
|
|
3153
3157
|
"red": string;
|
|
3154
3158
|
};
|
|
3159
|
+
"label": {
|
|
3160
|
+
"default": string;
|
|
3161
|
+
"deselected": string;
|
|
3162
|
+
};
|
|
3155
3163
|
};
|
|
3156
3164
|
"iconButton": {
|
|
3157
3165
|
"badge": {
|
|
@@ -858,6 +858,10 @@ declare const _default: {
|
|
|
858
858
|
"teal": "#089B83",
|
|
859
859
|
"sunrise": "#FFC300",
|
|
860
860
|
"slate": "#9a9ea7"
|
|
861
|
+
},
|
|
862
|
+
"label": {
|
|
863
|
+
"default": "#161517",
|
|
864
|
+
"deselected": "lch(6.94 1.44 305 / 0.3)"
|
|
861
865
|
}
|
|
862
866
|
}
|
|
863
867
|
},
|
|
@@ -955,6 +959,10 @@ declare const _default: {
|
|
|
955
959
|
"sunrise": "#FFC300",
|
|
956
960
|
"slate": "#9a9ea7",
|
|
957
961
|
"red": "#ff2323"
|
|
962
|
+
},
|
|
963
|
+
"label": {
|
|
964
|
+
"default": "#161517",
|
|
965
|
+
"deselected": "lch(6.94 1.44 305 / 0.3)"
|
|
958
966
|
}
|
|
959
967
|
},
|
|
960
968
|
"iconButton": {
|
|
@@ -1615,6 +1615,10 @@ declare const _default: {
|
|
|
1615
1615
|
"teal": "#6DF8E1",
|
|
1616
1616
|
"sunrise": "#FFC300",
|
|
1617
1617
|
"slate": "#9a9ea7"
|
|
1618
|
+
},
|
|
1619
|
+
"label": {
|
|
1620
|
+
"default": "#ffffff",
|
|
1621
|
+
"deselected": "lch(100 0 0 / 0.3)"
|
|
1618
1622
|
}
|
|
1619
1623
|
}
|
|
1620
1624
|
},
|
|
@@ -1712,6 +1716,10 @@ declare const _default: {
|
|
|
1712
1716
|
"teal": "#6DF8E1",
|
|
1713
1717
|
"sunrise": "#FFC300",
|
|
1714
1718
|
"slate": "#9a9ea7"
|
|
1719
|
+
},
|
|
1720
|
+
"label": {
|
|
1721
|
+
"default": "#ffffff",
|
|
1722
|
+
"deselected": "lch(100 0 0 / 0.3)"
|
|
1715
1723
|
}
|
|
1716
1724
|
},
|
|
1717
1725
|
"iconButton": {
|
|
@@ -3012,6 +3012,10 @@ declare const _default: {
|
|
|
3012
3012
|
"teal": "#089B83",
|
|
3013
3013
|
"sunrise": "#FFC300",
|
|
3014
3014
|
"slate": "#9a9ea7"
|
|
3015
|
+
},
|
|
3016
|
+
"label": {
|
|
3017
|
+
"default": "#161517",
|
|
3018
|
+
"deselected": "lch(6.94 1.44 305 / 0.3)"
|
|
3015
3019
|
}
|
|
3016
3020
|
}
|
|
3017
3021
|
},
|
|
@@ -3151,6 +3155,10 @@ declare const _default: {
|
|
|
3151
3155
|
"sunrise": "#FFC300",
|
|
3152
3156
|
"slate": "#9a9ea7",
|
|
3153
3157
|
"red": "#ff2323"
|
|
3158
|
+
},
|
|
3159
|
+
"label": {
|
|
3160
|
+
"default": "#161517",
|
|
3161
|
+
"deselected": "lch(6.94 1.44 305 / 0.3)"
|
|
3154
3162
|
}
|
|
3155
3163
|
},
|
|
3156
3164
|
"iconButton": {
|
|
@@ -1602,6 +1602,10 @@ declare const _default: {
|
|
|
1602
1602
|
"teal": "#089B83",
|
|
1603
1603
|
"sunrise": "#FFC300",
|
|
1604
1604
|
"slate": "#9a9ea7"
|
|
1605
|
+
},
|
|
1606
|
+
"label": {
|
|
1607
|
+
"default": "#161517",
|
|
1608
|
+
"deselected": "lch(6.94 1.44 305 / 0.3)"
|
|
1605
1609
|
}
|
|
1606
1610
|
}
|
|
1607
1611
|
},
|
|
@@ -1700,6 +1704,10 @@ declare const _default: {
|
|
|
1700
1704
|
"sunrise": "#FFC300",
|
|
1701
1705
|
"slate": "#9a9ea7",
|
|
1702
1706
|
"red": "#ff2323"
|
|
1707
|
+
},
|
|
1708
|
+
"label": {
|
|
1709
|
+
"default": "#161517",
|
|
1710
|
+
"deselected": "lch(6.94 1.44 305 / 0.3)"
|
|
1703
1711
|
}
|
|
1704
1712
|
},
|
|
1705
1713
|
"iconButton": {
|