@clickhouse/click-ui 0.0.216 → 0.0.217
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.bundled.es.js +52 -30
- package/dist/click-ui.bundled.umd.js +52 -30
- package/dist/click-ui.es.js +52 -30
- package/dist/click-ui.umd.js +52 -30
- package/dist/styles/types.d.ts +32 -5
- package/dist/styles/variables.dark.json.d.ts +1 -1
- package/dist/styles/variables.json.d.ts +34 -7
- package/dist/styles/variables.light.json.d.ts +2 -2
- package/package.json +1 -1
|
@@ -10632,28 +10632,27 @@ const ButtonGroup = ({
|
|
|
10632
10632
|
};
|
|
10633
10633
|
const ButtonGroupWrapper = pt.div.withConfig({
|
|
10634
10634
|
componentId: "sc-ukgugp-0"
|
|
10635
|
-
})(["box-sizing:border-box;
|
|
10635
|
+
})(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
|
|
10636
10636
|
theme: theme2,
|
|
10637
10637
|
$type = "default"
|
|
10638
|
-
}) => theme2.click.button.group.space.
|
|
10638
|
+
}) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
|
|
10639
10639
|
theme: theme2,
|
|
10640
10640
|
$type = "default"
|
|
10641
|
-
}) => theme2.click.button.group.
|
|
10641
|
+
}) => theme2.click.button.group.space.panel[$type].gap, ({
|
|
10642
|
+
theme: theme2,
|
|
10643
|
+
$type = "default"
|
|
10644
|
+
}) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
|
|
10642
10645
|
theme: theme2
|
|
10643
10646
|
}) => theme2.click.button.group.color.background.panel, ({
|
|
10644
10647
|
theme: theme2
|
|
10645
|
-
}) => theme2.click.button.group.radii.all, ({
|
|
10648
|
+
}) => theme2.click.button.group.radii.panel.all, ({
|
|
10646
10649
|
$fillWidth
|
|
10647
10650
|
}) => $fillWidth ? "100%" : "auto");
|
|
10648
|
-
const endRadii = "var(--click-button-button-group-radii-end)";
|
|
10649
|
-
const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
|
|
10650
|
-
const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
|
|
10651
|
-
const centerBorderRadius = "var(--click-button-button-group-radii-center)";
|
|
10652
10651
|
const Button$1 = pt.button.attrs((props) => ({
|
|
10653
10652
|
"aria-pressed": props.$active
|
|
10654
10653
|
})).withConfig({
|
|
10655
10654
|
componentId: "sc-ukgugp-1"
|
|
10656
|
-
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;
|
|
10655
|
+
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
|
|
10657
10656
|
$active,
|
|
10658
10657
|
theme: theme2
|
|
10659
10658
|
}) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
|
|
@@ -10661,14 +10660,14 @@ const Button$1 = pt.button.attrs((props) => ({
|
|
|
10661
10660
|
}) => theme2.click.button.group.color.text.default, ({
|
|
10662
10661
|
theme: theme2
|
|
10663
10662
|
}) => theme2.click.button.group.typography.label.default, ({
|
|
10664
|
-
theme: theme2
|
|
10665
|
-
|
|
10666
|
-
|
|
10667
|
-
}) => theme2.click.button.basic.space.x, ({
|
|
10668
|
-
theme: theme2
|
|
10669
|
-
}) => theme2.click.button.basic.space.group, ({
|
|
10663
|
+
theme: theme2,
|
|
10664
|
+
$type = "default"
|
|
10665
|
+
}) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
|
|
10670
10666
|
$fillWidth = false
|
|
10671
10667
|
}) => $fillWidth ? "flex: 1;" : "", ({
|
|
10668
|
+
theme: theme2,
|
|
10669
|
+
$type = "default"
|
|
10670
|
+
}) => theme2.click.button.group.radii.button[$type].all, ({
|
|
10672
10671
|
theme: theme2
|
|
10673
10672
|
}) => theme2.click.button.group.color.background.hover, ({
|
|
10674
10673
|
theme: theme2
|
|
@@ -10691,11 +10690,7 @@ const Button$1 = pt.button.attrs((props) => ({
|
|
|
10691
10690
|
theme: theme2
|
|
10692
10691
|
}) => theme2.click.button.group.color.text.active, ({
|
|
10693
10692
|
theme: theme2
|
|
10694
|
-
}) => theme2.click.button.group.color.background["disabled-active"]
|
|
10695
|
-
theme: theme2,
|
|
10696
|
-
$type,
|
|
10697
|
-
$position
|
|
10698
|
-
}) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
|
|
10693
|
+
}) => theme2.click.button.group.color.background["disabled-active"]);
|
|
10699
10694
|
const Button = ({
|
|
10700
10695
|
type = "primary",
|
|
10701
10696
|
iconLeft,
|
|
@@ -44795,7 +44790,7 @@ const click$2 = {
|
|
|
44795
44790
|
background: {
|
|
44796
44791
|
"default": "rgba(0,0,0,0)",
|
|
44797
44792
|
hover: "#282828",
|
|
44798
|
-
active: "
|
|
44793
|
+
active: "#414141",
|
|
44799
44794
|
disabled: "rgba(0,0,0,0)",
|
|
44800
44795
|
"disabled-active": "lch(0 0 0 / 0)",
|
|
44801
44796
|
panel: "rgba(0,0,0,0)"
|
|
@@ -46619,9 +46614,9 @@ const click$1 = {
|
|
|
46619
46614
|
background: {
|
|
46620
46615
|
"default": "rgba(0,0,0,0)",
|
|
46621
46616
|
hover: "#f6f7fa",
|
|
46622
|
-
active: "lch(
|
|
46617
|
+
active: "lch(95.3 1.54 272)",
|
|
46623
46618
|
disabled: "rgba(0,0,0,0)",
|
|
46624
|
-
"disabled-active": "lch(
|
|
46619
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
46625
46620
|
panel: "rgba(0,0,0,0)"
|
|
46626
46621
|
},
|
|
46627
46622
|
text: {
|
|
@@ -48723,8 +48718,17 @@ const click = {
|
|
|
48723
48718
|
},
|
|
48724
48719
|
group: {
|
|
48725
48720
|
radii: {
|
|
48726
|
-
|
|
48727
|
-
|
|
48721
|
+
button: {
|
|
48722
|
+
"default": {
|
|
48723
|
+
all: "2px"
|
|
48724
|
+
},
|
|
48725
|
+
borderless: {
|
|
48726
|
+
all: "0.25rem"
|
|
48727
|
+
}
|
|
48728
|
+
},
|
|
48729
|
+
panel: {
|
|
48730
|
+
all: "0.25rem"
|
|
48731
|
+
}
|
|
48728
48732
|
},
|
|
48729
48733
|
typography: {
|
|
48730
48734
|
label: {
|
|
@@ -48742,18 +48746,36 @@ const click = {
|
|
|
48742
48746
|
}
|
|
48743
48747
|
},
|
|
48744
48748
|
space: {
|
|
48745
|
-
|
|
48746
|
-
"default":
|
|
48747
|
-
|
|
48749
|
+
panel: {
|
|
48750
|
+
"default": {
|
|
48751
|
+
x: "3px",
|
|
48752
|
+
y: "3px",
|
|
48753
|
+
gap: "3px"
|
|
48754
|
+
},
|
|
48755
|
+
borderless: {
|
|
48756
|
+
x: "0",
|
|
48757
|
+
y: "0",
|
|
48758
|
+
gap: "0.25rem"
|
|
48759
|
+
}
|
|
48760
|
+
},
|
|
48761
|
+
button: {
|
|
48762
|
+
"default": {
|
|
48763
|
+
y: "1.5px",
|
|
48764
|
+
x: "0.75rem"
|
|
48765
|
+
},
|
|
48766
|
+
borderless: {
|
|
48767
|
+
y: "5.5px",
|
|
48768
|
+
x: "1rem"
|
|
48769
|
+
}
|
|
48748
48770
|
}
|
|
48749
48771
|
},
|
|
48750
48772
|
color: {
|
|
48751
48773
|
background: {
|
|
48752
48774
|
"default": "rgba(0,0,0,0)",
|
|
48753
48775
|
hover: "#f6f7fa",
|
|
48754
|
-
active: "lch(
|
|
48776
|
+
active: "lch(95.3 1.54 272)",
|
|
48755
48777
|
disabled: "rgba(0,0,0,0)",
|
|
48756
|
-
"disabled-active": "lch(
|
|
48778
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
48757
48779
|
panel: "rgba(0,0,0,0)"
|
|
48758
48780
|
},
|
|
48759
48781
|
text: {
|
|
@@ -10648,28 +10648,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
10648
10648
|
};
|
|
10649
10649
|
const ButtonGroupWrapper = pt.div.withConfig({
|
|
10650
10650
|
componentId: "sc-ukgugp-0"
|
|
10651
|
-
})(["box-sizing:border-box;
|
|
10651
|
+
})(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
|
|
10652
10652
|
theme: theme2,
|
|
10653
10653
|
$type = "default"
|
|
10654
|
-
}) => theme2.click.button.group.space.
|
|
10654
|
+
}) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
|
|
10655
10655
|
theme: theme2,
|
|
10656
10656
|
$type = "default"
|
|
10657
|
-
}) => theme2.click.button.group.
|
|
10657
|
+
}) => theme2.click.button.group.space.panel[$type].gap, ({
|
|
10658
|
+
theme: theme2,
|
|
10659
|
+
$type = "default"
|
|
10660
|
+
}) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
|
|
10658
10661
|
theme: theme2
|
|
10659
10662
|
}) => theme2.click.button.group.color.background.panel, ({
|
|
10660
10663
|
theme: theme2
|
|
10661
|
-
}) => theme2.click.button.group.radii.all, ({
|
|
10664
|
+
}) => theme2.click.button.group.radii.panel.all, ({
|
|
10662
10665
|
$fillWidth
|
|
10663
10666
|
}) => $fillWidth ? "100%" : "auto");
|
|
10664
|
-
const endRadii = "var(--click-button-button-group-radii-end)";
|
|
10665
|
-
const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
|
|
10666
|
-
const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
|
|
10667
|
-
const centerBorderRadius = "var(--click-button-button-group-radii-center)";
|
|
10668
10667
|
const Button$1 = pt.button.attrs((props) => ({
|
|
10669
10668
|
"aria-pressed": props.$active
|
|
10670
10669
|
})).withConfig({
|
|
10671
10670
|
componentId: "sc-ukgugp-1"
|
|
10672
|
-
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;
|
|
10671
|
+
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
|
|
10673
10672
|
$active,
|
|
10674
10673
|
theme: theme2
|
|
10675
10674
|
}) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
|
|
@@ -10677,14 +10676,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
10677
10676
|
}) => theme2.click.button.group.color.text.default, ({
|
|
10678
10677
|
theme: theme2
|
|
10679
10678
|
}) => theme2.click.button.group.typography.label.default, ({
|
|
10680
|
-
theme: theme2
|
|
10681
|
-
|
|
10682
|
-
|
|
10683
|
-
}) => theme2.click.button.basic.space.x, ({
|
|
10684
|
-
theme: theme2
|
|
10685
|
-
}) => theme2.click.button.basic.space.group, ({
|
|
10679
|
+
theme: theme2,
|
|
10680
|
+
$type = "default"
|
|
10681
|
+
}) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
|
|
10686
10682
|
$fillWidth = false
|
|
10687
10683
|
}) => $fillWidth ? "flex: 1;" : "", ({
|
|
10684
|
+
theme: theme2,
|
|
10685
|
+
$type = "default"
|
|
10686
|
+
}) => theme2.click.button.group.radii.button[$type].all, ({
|
|
10688
10687
|
theme: theme2
|
|
10689
10688
|
}) => theme2.click.button.group.color.background.hover, ({
|
|
10690
10689
|
theme: theme2
|
|
@@ -10707,11 +10706,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
10707
10706
|
theme: theme2
|
|
10708
10707
|
}) => theme2.click.button.group.color.text.active, ({
|
|
10709
10708
|
theme: theme2
|
|
10710
|
-
}) => theme2.click.button.group.color.background["disabled-active"]
|
|
10711
|
-
theme: theme2,
|
|
10712
|
-
$type,
|
|
10713
|
-
$position
|
|
10714
|
-
}) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
|
|
10709
|
+
}) => theme2.click.button.group.color.background["disabled-active"]);
|
|
10715
10710
|
const Button = ({
|
|
10716
10711
|
type = "primary",
|
|
10717
10712
|
iconLeft,
|
|
@@ -44811,7 +44806,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
44811
44806
|
background: {
|
|
44812
44807
|
"default": "rgba(0,0,0,0)",
|
|
44813
44808
|
hover: "#282828",
|
|
44814
|
-
active: "
|
|
44809
|
+
active: "#414141",
|
|
44815
44810
|
disabled: "rgba(0,0,0,0)",
|
|
44816
44811
|
"disabled-active": "lch(0 0 0 / 0)",
|
|
44817
44812
|
panel: "rgba(0,0,0,0)"
|
|
@@ -46635,9 +46630,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
46635
46630
|
background: {
|
|
46636
46631
|
"default": "rgba(0,0,0,0)",
|
|
46637
46632
|
hover: "#f6f7fa",
|
|
46638
|
-
active: "lch(
|
|
46633
|
+
active: "lch(95.3 1.54 272)",
|
|
46639
46634
|
disabled: "rgba(0,0,0,0)",
|
|
46640
|
-
"disabled-active": "lch(
|
|
46635
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
46641
46636
|
panel: "rgba(0,0,0,0)"
|
|
46642
46637
|
},
|
|
46643
46638
|
text: {
|
|
@@ -48739,8 +48734,17 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
48739
48734
|
},
|
|
48740
48735
|
group: {
|
|
48741
48736
|
radii: {
|
|
48742
|
-
|
|
48743
|
-
|
|
48737
|
+
button: {
|
|
48738
|
+
"default": {
|
|
48739
|
+
all: "2px"
|
|
48740
|
+
},
|
|
48741
|
+
borderless: {
|
|
48742
|
+
all: "0.25rem"
|
|
48743
|
+
}
|
|
48744
|
+
},
|
|
48745
|
+
panel: {
|
|
48746
|
+
all: "0.25rem"
|
|
48747
|
+
}
|
|
48744
48748
|
},
|
|
48745
48749
|
typography: {
|
|
48746
48750
|
label: {
|
|
@@ -48758,18 +48762,36 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
48758
48762
|
}
|
|
48759
48763
|
},
|
|
48760
48764
|
space: {
|
|
48761
|
-
|
|
48762
|
-
"default":
|
|
48763
|
-
|
|
48765
|
+
panel: {
|
|
48766
|
+
"default": {
|
|
48767
|
+
x: "3px",
|
|
48768
|
+
y: "3px",
|
|
48769
|
+
gap: "3px"
|
|
48770
|
+
},
|
|
48771
|
+
borderless: {
|
|
48772
|
+
x: "0",
|
|
48773
|
+
y: "0",
|
|
48774
|
+
gap: "0.25rem"
|
|
48775
|
+
}
|
|
48776
|
+
},
|
|
48777
|
+
button: {
|
|
48778
|
+
"default": {
|
|
48779
|
+
y: "1.5px",
|
|
48780
|
+
x: "0.75rem"
|
|
48781
|
+
},
|
|
48782
|
+
borderless: {
|
|
48783
|
+
y: "5.5px",
|
|
48784
|
+
x: "1rem"
|
|
48785
|
+
}
|
|
48764
48786
|
}
|
|
48765
48787
|
},
|
|
48766
48788
|
color: {
|
|
48767
48789
|
background: {
|
|
48768
48790
|
"default": "rgba(0,0,0,0)",
|
|
48769
48791
|
hover: "#f6f7fa",
|
|
48770
|
-
active: "lch(
|
|
48792
|
+
active: "lch(95.3 1.54 272)",
|
|
48771
48793
|
disabled: "rgba(0,0,0,0)",
|
|
48772
|
-
"disabled-active": "lch(
|
|
48794
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
48773
48795
|
panel: "rgba(0,0,0,0)"
|
|
48774
48796
|
},
|
|
48775
48797
|
text: {
|
package/dist/click-ui.es.js
CHANGED
|
@@ -9436,28 +9436,27 @@ const ButtonGroup = ({
|
|
|
9436
9436
|
};
|
|
9437
9437
|
const ButtonGroupWrapper = styled.div.withConfig({
|
|
9438
9438
|
componentId: "sc-ukgugp-0"
|
|
9439
|
-
})(["box-sizing:border-box;
|
|
9439
|
+
})(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
|
|
9440
9440
|
theme: theme2,
|
|
9441
9441
|
$type = "default"
|
|
9442
|
-
}) => theme2.click.button.group.space.
|
|
9442
|
+
}) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
|
|
9443
9443
|
theme: theme2,
|
|
9444
9444
|
$type = "default"
|
|
9445
|
-
}) => theme2.click.button.group.
|
|
9445
|
+
}) => theme2.click.button.group.space.panel[$type].gap, ({
|
|
9446
|
+
theme: theme2,
|
|
9447
|
+
$type = "default"
|
|
9448
|
+
}) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
|
|
9446
9449
|
theme: theme2
|
|
9447
9450
|
}) => theme2.click.button.group.color.background.panel, ({
|
|
9448
9451
|
theme: theme2
|
|
9449
|
-
}) => theme2.click.button.group.radii.all, ({
|
|
9452
|
+
}) => theme2.click.button.group.radii.panel.all, ({
|
|
9450
9453
|
$fillWidth
|
|
9451
9454
|
}) => $fillWidth ? "100%" : "auto");
|
|
9452
|
-
const endRadii = "var(--click-button-button-group-radii-end)";
|
|
9453
|
-
const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
|
|
9454
|
-
const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
|
|
9455
|
-
const centerBorderRadius = "var(--click-button-button-group-radii-center)";
|
|
9456
9455
|
const Button$1 = styled.button.attrs((props) => ({
|
|
9457
9456
|
"aria-pressed": props.$active
|
|
9458
9457
|
})).withConfig({
|
|
9459
9458
|
componentId: "sc-ukgugp-1"
|
|
9460
|
-
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;
|
|
9459
|
+
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
|
|
9461
9460
|
$active,
|
|
9462
9461
|
theme: theme2
|
|
9463
9462
|
}) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
|
|
@@ -9465,14 +9464,14 @@ const Button$1 = styled.button.attrs((props) => ({
|
|
|
9465
9464
|
}) => theme2.click.button.group.color.text.default, ({
|
|
9466
9465
|
theme: theme2
|
|
9467
9466
|
}) => theme2.click.button.group.typography.label.default, ({
|
|
9468
|
-
theme: theme2
|
|
9469
|
-
|
|
9470
|
-
|
|
9471
|
-
}) => theme2.click.button.basic.space.x, ({
|
|
9472
|
-
theme: theme2
|
|
9473
|
-
}) => theme2.click.button.basic.space.group, ({
|
|
9467
|
+
theme: theme2,
|
|
9468
|
+
$type = "default"
|
|
9469
|
+
}) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
|
|
9474
9470
|
$fillWidth = false
|
|
9475
9471
|
}) => $fillWidth ? "flex: 1;" : "", ({
|
|
9472
|
+
theme: theme2,
|
|
9473
|
+
$type = "default"
|
|
9474
|
+
}) => theme2.click.button.group.radii.button[$type].all, ({
|
|
9476
9475
|
theme: theme2
|
|
9477
9476
|
}) => theme2.click.button.group.color.background.hover, ({
|
|
9478
9477
|
theme: theme2
|
|
@@ -9495,11 +9494,7 @@ const Button$1 = styled.button.attrs((props) => ({
|
|
|
9495
9494
|
theme: theme2
|
|
9496
9495
|
}) => theme2.click.button.group.color.text.active, ({
|
|
9497
9496
|
theme: theme2
|
|
9498
|
-
}) => theme2.click.button.group.color.background["disabled-active"]
|
|
9499
|
-
theme: theme2,
|
|
9500
|
-
$type,
|
|
9501
|
-
$position
|
|
9502
|
-
}) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
|
|
9497
|
+
}) => theme2.click.button.group.color.background["disabled-active"]);
|
|
9503
9498
|
const Button = ({
|
|
9504
9499
|
type = "primary",
|
|
9505
9500
|
iconLeft,
|
|
@@ -43627,7 +43622,7 @@ const click$2 = {
|
|
|
43627
43622
|
background: {
|
|
43628
43623
|
"default": "rgba(0,0,0,0)",
|
|
43629
43624
|
hover: "#282828",
|
|
43630
|
-
active: "
|
|
43625
|
+
active: "#414141",
|
|
43631
43626
|
disabled: "rgba(0,0,0,0)",
|
|
43632
43627
|
"disabled-active": "lch(0 0 0 / 0)",
|
|
43633
43628
|
panel: "rgba(0,0,0,0)"
|
|
@@ -45451,9 +45446,9 @@ const click$1 = {
|
|
|
45451
45446
|
background: {
|
|
45452
45447
|
"default": "rgba(0,0,0,0)",
|
|
45453
45448
|
hover: "#f6f7fa",
|
|
45454
|
-
active: "lch(
|
|
45449
|
+
active: "lch(95.3 1.54 272)",
|
|
45455
45450
|
disabled: "rgba(0,0,0,0)",
|
|
45456
|
-
"disabled-active": "lch(
|
|
45451
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
45457
45452
|
panel: "rgba(0,0,0,0)"
|
|
45458
45453
|
},
|
|
45459
45454
|
text: {
|
|
@@ -47555,8 +47550,17 @@ const click = {
|
|
|
47555
47550
|
},
|
|
47556
47551
|
group: {
|
|
47557
47552
|
radii: {
|
|
47558
|
-
|
|
47559
|
-
|
|
47553
|
+
button: {
|
|
47554
|
+
"default": {
|
|
47555
|
+
all: "2px"
|
|
47556
|
+
},
|
|
47557
|
+
borderless: {
|
|
47558
|
+
all: "0.25rem"
|
|
47559
|
+
}
|
|
47560
|
+
},
|
|
47561
|
+
panel: {
|
|
47562
|
+
all: "0.25rem"
|
|
47563
|
+
}
|
|
47560
47564
|
},
|
|
47561
47565
|
typography: {
|
|
47562
47566
|
label: {
|
|
@@ -47574,18 +47578,36 @@ const click = {
|
|
|
47574
47578
|
}
|
|
47575
47579
|
},
|
|
47576
47580
|
space: {
|
|
47577
|
-
|
|
47578
|
-
"default":
|
|
47579
|
-
|
|
47581
|
+
panel: {
|
|
47582
|
+
"default": {
|
|
47583
|
+
x: "3px",
|
|
47584
|
+
y: "3px",
|
|
47585
|
+
gap: "3px"
|
|
47586
|
+
},
|
|
47587
|
+
borderless: {
|
|
47588
|
+
x: "0",
|
|
47589
|
+
y: "0",
|
|
47590
|
+
gap: "0.25rem"
|
|
47591
|
+
}
|
|
47592
|
+
},
|
|
47593
|
+
button: {
|
|
47594
|
+
"default": {
|
|
47595
|
+
y: "1.5px",
|
|
47596
|
+
x: "0.75rem"
|
|
47597
|
+
},
|
|
47598
|
+
borderless: {
|
|
47599
|
+
y: "5.5px",
|
|
47600
|
+
x: "1rem"
|
|
47601
|
+
}
|
|
47580
47602
|
}
|
|
47581
47603
|
},
|
|
47582
47604
|
color: {
|
|
47583
47605
|
background: {
|
|
47584
47606
|
"default": "rgba(0,0,0,0)",
|
|
47585
47607
|
hover: "#f6f7fa",
|
|
47586
|
-
active: "lch(
|
|
47608
|
+
active: "lch(95.3 1.54 272)",
|
|
47587
47609
|
disabled: "rgba(0,0,0,0)",
|
|
47588
|
-
"disabled-active": "lch(
|
|
47610
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
47589
47611
|
panel: "rgba(0,0,0,0)"
|
|
47590
47612
|
},
|
|
47591
47613
|
text: {
|
package/dist/click-ui.umd.js
CHANGED
|
@@ -9451,28 +9451,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
9451
9451
|
};
|
|
9452
9452
|
const ButtonGroupWrapper = styled.styled.div.withConfig({
|
|
9453
9453
|
componentId: "sc-ukgugp-0"
|
|
9454
|
-
})(["box-sizing:border-box;
|
|
9454
|
+
})(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
|
|
9455
9455
|
theme: theme2,
|
|
9456
9456
|
$type = "default"
|
|
9457
|
-
}) => theme2.click.button.group.space.
|
|
9457
|
+
}) => `${theme2.click.button.group.space.panel[$type].x} ${theme2.click.button.group.space.panel[$type].y}`, ({
|
|
9458
9458
|
theme: theme2,
|
|
9459
9459
|
$type = "default"
|
|
9460
|
-
}) => theme2.click.button.group.
|
|
9460
|
+
}) => theme2.click.button.group.space.panel[$type].gap, ({
|
|
9461
|
+
theme: theme2,
|
|
9462
|
+
$type = "default"
|
|
9463
|
+
}) => $type === "default" ? `1px solid ${theme2.click.button.group.color.panel.stroke[$type]}` : "none", ({
|
|
9461
9464
|
theme: theme2
|
|
9462
9465
|
}) => theme2.click.button.group.color.background.panel, ({
|
|
9463
9466
|
theme: theme2
|
|
9464
|
-
}) => theme2.click.button.group.radii.all, ({
|
|
9467
|
+
}) => theme2.click.button.group.radii.panel.all, ({
|
|
9465
9468
|
$fillWidth
|
|
9466
9469
|
}) => $fillWidth ? "100%" : "auto");
|
|
9467
|
-
const endRadii = "var(--click-button-button-group-radii-end)";
|
|
9468
|
-
const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
|
|
9469
|
-
const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
|
|
9470
|
-
const centerBorderRadius = "var(--click-button-button-group-radii-center)";
|
|
9471
9470
|
const Button$1 = styled.styled.button.attrs((props) => ({
|
|
9472
9471
|
"aria-pressed": props.$active
|
|
9473
9472
|
})).withConfig({
|
|
9474
9473
|
componentId: "sc-ukgugp-1"
|
|
9475
|
-
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;
|
|
9474
|
+
})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
|
|
9476
9475
|
$active,
|
|
9477
9476
|
theme: theme2
|
|
9478
9477
|
}) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
|
|
@@ -9480,14 +9479,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
9480
9479
|
}) => theme2.click.button.group.color.text.default, ({
|
|
9481
9480
|
theme: theme2
|
|
9482
9481
|
}) => theme2.click.button.group.typography.label.default, ({
|
|
9483
|
-
theme: theme2
|
|
9484
|
-
|
|
9485
|
-
|
|
9486
|
-
}) => theme2.click.button.basic.space.x, ({
|
|
9487
|
-
theme: theme2
|
|
9488
|
-
}) => theme2.click.button.basic.space.group, ({
|
|
9482
|
+
theme: theme2,
|
|
9483
|
+
$type = "default"
|
|
9484
|
+
}) => `${theme2.click.button.group.space.button[$type].y} ${theme2.click.button.group.space.button[$type].x}`, ({
|
|
9489
9485
|
$fillWidth = false
|
|
9490
9486
|
}) => $fillWidth ? "flex: 1;" : "", ({
|
|
9487
|
+
theme: theme2,
|
|
9488
|
+
$type = "default"
|
|
9489
|
+
}) => theme2.click.button.group.radii.button[$type].all, ({
|
|
9491
9490
|
theme: theme2
|
|
9492
9491
|
}) => theme2.click.button.group.color.background.hover, ({
|
|
9493
9492
|
theme: theme2
|
|
@@ -9510,11 +9509,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
9510
9509
|
theme: theme2
|
|
9511
9510
|
}) => theme2.click.button.group.color.text.active, ({
|
|
9512
9511
|
theme: theme2
|
|
9513
|
-
}) => theme2.click.button.group.color.background["disabled-active"]
|
|
9514
|
-
theme: theme2,
|
|
9515
|
-
$type,
|
|
9516
|
-
$position
|
|
9517
|
-
}) => $type === "borderless" ? theme2.click.button.group.radii.all : $position === "left" ? leftBorderRadius : $position === "right" ? rightBorderRadius : centerBorderRadius);
|
|
9512
|
+
}) => theme2.click.button.group.color.background["disabled-active"]);
|
|
9518
9513
|
const Button = ({
|
|
9519
9514
|
type = "primary",
|
|
9520
9515
|
iconLeft,
|
|
@@ -43642,7 +43637,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
43642
43637
|
background: {
|
|
43643
43638
|
"default": "rgba(0,0,0,0)",
|
|
43644
43639
|
hover: "#282828",
|
|
43645
|
-
active: "
|
|
43640
|
+
active: "#414141",
|
|
43646
43641
|
disabled: "rgba(0,0,0,0)",
|
|
43647
43642
|
"disabled-active": "lch(0 0 0 / 0)",
|
|
43648
43643
|
panel: "rgba(0,0,0,0)"
|
|
@@ -45466,9 +45461,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
45466
45461
|
background: {
|
|
45467
45462
|
"default": "rgba(0,0,0,0)",
|
|
45468
45463
|
hover: "#f6f7fa",
|
|
45469
|
-
active: "lch(
|
|
45464
|
+
active: "lch(95.3 1.54 272)",
|
|
45470
45465
|
disabled: "rgba(0,0,0,0)",
|
|
45471
|
-
"disabled-active": "lch(
|
|
45466
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
45472
45467
|
panel: "rgba(0,0,0,0)"
|
|
45473
45468
|
},
|
|
45474
45469
|
text: {
|
|
@@ -47570,8 +47565,17 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
47570
47565
|
},
|
|
47571
47566
|
group: {
|
|
47572
47567
|
radii: {
|
|
47573
|
-
|
|
47574
|
-
|
|
47568
|
+
button: {
|
|
47569
|
+
"default": {
|
|
47570
|
+
all: "2px"
|
|
47571
|
+
},
|
|
47572
|
+
borderless: {
|
|
47573
|
+
all: "0.25rem"
|
|
47574
|
+
}
|
|
47575
|
+
},
|
|
47576
|
+
panel: {
|
|
47577
|
+
all: "0.25rem"
|
|
47578
|
+
}
|
|
47575
47579
|
},
|
|
47576
47580
|
typography: {
|
|
47577
47581
|
label: {
|
|
@@ -47589,18 +47593,36 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
|
|
|
47589
47593
|
}
|
|
47590
47594
|
},
|
|
47591
47595
|
space: {
|
|
47592
|
-
|
|
47593
|
-
"default":
|
|
47594
|
-
|
|
47596
|
+
panel: {
|
|
47597
|
+
"default": {
|
|
47598
|
+
x: "3px",
|
|
47599
|
+
y: "3px",
|
|
47600
|
+
gap: "3px"
|
|
47601
|
+
},
|
|
47602
|
+
borderless: {
|
|
47603
|
+
x: "0",
|
|
47604
|
+
y: "0",
|
|
47605
|
+
gap: "0.25rem"
|
|
47606
|
+
}
|
|
47607
|
+
},
|
|
47608
|
+
button: {
|
|
47609
|
+
"default": {
|
|
47610
|
+
y: "1.5px",
|
|
47611
|
+
x: "0.75rem"
|
|
47612
|
+
},
|
|
47613
|
+
borderless: {
|
|
47614
|
+
y: "5.5px",
|
|
47615
|
+
x: "1rem"
|
|
47616
|
+
}
|
|
47595
47617
|
}
|
|
47596
47618
|
},
|
|
47597
47619
|
color: {
|
|
47598
47620
|
background: {
|
|
47599
47621
|
"default": "rgba(0,0,0,0)",
|
|
47600
47622
|
hover: "#f6f7fa",
|
|
47601
|
-
active: "lch(
|
|
47623
|
+
active: "lch(95.3 1.54 272)",
|
|
47602
47624
|
disabled: "rgba(0,0,0,0)",
|
|
47603
|
-
"disabled-active": "lch(
|
|
47625
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
47604
47626
|
panel: "rgba(0,0,0,0)"
|
|
47605
47627
|
},
|
|
47606
47628
|
text: {
|
package/dist/styles/types.d.ts
CHANGED
|
@@ -711,8 +711,17 @@ export interface Theme {
|
|
|
711
711
|
};
|
|
712
712
|
"group": {
|
|
713
713
|
"radii": {
|
|
714
|
-
"
|
|
715
|
-
|
|
714
|
+
"button": {
|
|
715
|
+
"default": {
|
|
716
|
+
"all": string;
|
|
717
|
+
};
|
|
718
|
+
"borderless": {
|
|
719
|
+
"all": string;
|
|
720
|
+
};
|
|
721
|
+
};
|
|
722
|
+
"panel": {
|
|
723
|
+
"all": string;
|
|
724
|
+
};
|
|
716
725
|
};
|
|
717
726
|
"typography": {
|
|
718
727
|
"label": {
|
|
@@ -730,9 +739,27 @@ export interface Theme {
|
|
|
730
739
|
};
|
|
731
740
|
};
|
|
732
741
|
"space": {
|
|
733
|
-
"
|
|
734
|
-
"default":
|
|
735
|
-
|
|
742
|
+
"panel": {
|
|
743
|
+
"default": {
|
|
744
|
+
"x": string;
|
|
745
|
+
"y": string;
|
|
746
|
+
"gap": string;
|
|
747
|
+
};
|
|
748
|
+
"borderless": {
|
|
749
|
+
"x": string;
|
|
750
|
+
"y": string;
|
|
751
|
+
"gap": string;
|
|
752
|
+
};
|
|
753
|
+
};
|
|
754
|
+
"button": {
|
|
755
|
+
"default": {
|
|
756
|
+
"y": string;
|
|
757
|
+
"x": string;
|
|
758
|
+
};
|
|
759
|
+
"borderless": {
|
|
760
|
+
"y": string;
|
|
761
|
+
"x": string;
|
|
762
|
+
};
|
|
736
763
|
};
|
|
737
764
|
};
|
|
738
765
|
"color": {
|
|
@@ -419,7 +419,7 @@ declare const _default: {
|
|
|
419
419
|
"background": {
|
|
420
420
|
"default": "rgba(0,0,0,0)",
|
|
421
421
|
"hover": "#282828",
|
|
422
|
-
"active": "
|
|
422
|
+
"active": "#414141",
|
|
423
423
|
"disabled": "rgba(0,0,0,0)",
|
|
424
424
|
"disabled-active": "lch(0 0 0 / 0)",
|
|
425
425
|
"panel": "rgba(0,0,0,0)"
|
|
@@ -711,8 +711,17 @@ declare const _default: {
|
|
|
711
711
|
},
|
|
712
712
|
"group": {
|
|
713
713
|
"radii": {
|
|
714
|
-
"
|
|
715
|
-
|
|
714
|
+
"button": {
|
|
715
|
+
"default": {
|
|
716
|
+
"all": "2px"
|
|
717
|
+
},
|
|
718
|
+
"borderless": {
|
|
719
|
+
"all": "0.25rem"
|
|
720
|
+
}
|
|
721
|
+
},
|
|
722
|
+
"panel": {
|
|
723
|
+
"all": "0.25rem"
|
|
724
|
+
}
|
|
716
725
|
},
|
|
717
726
|
"typography": {
|
|
718
727
|
"label": {
|
|
@@ -730,18 +739,36 @@ declare const _default: {
|
|
|
730
739
|
}
|
|
731
740
|
},
|
|
732
741
|
"space": {
|
|
733
|
-
"
|
|
734
|
-
"default":
|
|
735
|
-
|
|
742
|
+
"panel": {
|
|
743
|
+
"default": {
|
|
744
|
+
"x": "3px",
|
|
745
|
+
"y": "3px",
|
|
746
|
+
"gap": "3px"
|
|
747
|
+
},
|
|
748
|
+
"borderless": {
|
|
749
|
+
"x": "0",
|
|
750
|
+
"y": "0",
|
|
751
|
+
"gap": "0.25rem"
|
|
752
|
+
}
|
|
753
|
+
},
|
|
754
|
+
"button": {
|
|
755
|
+
"default": {
|
|
756
|
+
"y": "1.5px",
|
|
757
|
+
"x": "0.75rem"
|
|
758
|
+
},
|
|
759
|
+
"borderless": {
|
|
760
|
+
"y": "5.5px",
|
|
761
|
+
"x": "1rem"
|
|
762
|
+
}
|
|
736
763
|
}
|
|
737
764
|
},
|
|
738
765
|
"color": {
|
|
739
766
|
"background": {
|
|
740
767
|
"default": "rgba(0,0,0,0)",
|
|
741
768
|
"hover": "#f6f7fa",
|
|
742
|
-
"active": "lch(
|
|
769
|
+
"active": "lch(95.3 1.54 272)",
|
|
743
770
|
"disabled": "rgba(0,0,0,0)",
|
|
744
|
-
"disabled-active": "lch(
|
|
771
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
745
772
|
"panel": "rgba(0,0,0,0)"
|
|
746
773
|
},
|
|
747
774
|
"text": {
|
|
@@ -419,9 +419,9 @@ declare const _default: {
|
|
|
419
419
|
"background": {
|
|
420
420
|
"default": "rgba(0,0,0,0)",
|
|
421
421
|
"hover": "#f6f7fa",
|
|
422
|
-
"active": "lch(
|
|
422
|
+
"active": "lch(95.3 1.54 272)",
|
|
423
423
|
"disabled": "rgba(0,0,0,0)",
|
|
424
|
-
"disabled-active": "lch(
|
|
424
|
+
"disabled-active": "lch(76.2 1.23 272)",
|
|
425
425
|
"panel": "rgba(0,0,0,0)"
|
|
426
426
|
},
|
|
427
427
|
"text": {
|