@galaxy-io/dls 1.6.0 → 1.6.1
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.
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
|
|
1
2
|
import { InputSize, InputVariant } from "./Input";
|
|
2
3
|
export interface SwitcherInputItem {
|
|
3
4
|
/** Matched against `selectedId` to decide which segment is active. */
|
|
4
5
|
id: string;
|
|
5
6
|
label: string;
|
|
7
|
+
/** Phosphor icon *component* leading the label — pass `ListIcon`, not `<ListIcon />`. */
|
|
8
|
+
icon?: PhosphorIcon;
|
|
6
9
|
/** Called when this segment is clicked. Update `selectedId` yourself. */
|
|
7
10
|
onClick: () => void;
|
|
8
11
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import Text, { TextVariant, TextWeight } from "../text/Text.js";
|
|
3
|
-
import
|
|
3
|
+
import FlexItem from "../containers/FlexItem.js";
|
|
4
|
+
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
5
|
+
import { InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputSurfaceColor, getInputTextSize } from "./Input.js";
|
|
4
6
|
/* empty css */
|
|
5
7
|
import { styled } from "@linaria/react";
|
|
6
8
|
import { match } from "ts-pattern";
|
|
7
|
-
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
10
|
//#region src/inputs/SwitcherInput.tsx
|
|
9
11
|
var _exp = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
|
|
10
12
|
var _exp2 = () => ({ theme, $variant }) => getInputBorderColor(theme, $variant);
|
|
@@ -24,10 +26,13 @@ var StyledSwitcherInput = withTheme(/*#__PURE__*/ styled("div")({
|
|
|
24
26
|
}
|
|
25
27
|
}));
|
|
26
28
|
var _exp5 = () => ({ $size }) => {
|
|
29
|
+
return match($size).with(InputSize.SMALL, () => "4px").with(InputSize.MEDIUM, () => "6px").with(InputSize.LARGE, () => "6px").exhaustive();
|
|
30
|
+
};
|
|
31
|
+
var _exp6 = () => ({ $size }) => {
|
|
27
32
|
return match($size).with(InputSize.SMALL, () => "2px 8px").with(InputSize.MEDIUM, () => "3px 10px").with(InputSize.LARGE, () => "5px 12px").exhaustive();
|
|
28
33
|
};
|
|
29
|
-
var
|
|
30
|
-
var
|
|
34
|
+
var _exp7 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : "transparent";
|
|
35
|
+
var _exp8 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.border.primary : "transparent";
|
|
31
36
|
var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
|
|
32
37
|
name: "StyledSwitcherInputItem",
|
|
33
38
|
class: "s1pe4aqp",
|
|
@@ -35,7 +40,8 @@ var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
|
|
|
35
40
|
vars: {
|
|
36
41
|
"s1pe4aqp-0": [_exp5()],
|
|
37
42
|
"s1pe4aqp-1": [_exp6()],
|
|
38
|
-
"s1pe4aqp-2": [_exp7()]
|
|
43
|
+
"s1pe4aqp-2": [_exp7()],
|
|
44
|
+
"s1pe4aqp-3": [_exp8()]
|
|
39
45
|
}
|
|
40
46
|
}));
|
|
41
47
|
/**
|
|
@@ -46,18 +52,29 @@ var SwitcherInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM,
|
|
|
46
52
|
return /* @__PURE__ */ jsx(StyledSwitcherInput, {
|
|
47
53
|
$size: size,
|
|
48
54
|
$variant: variant,
|
|
49
|
-
children: items.map((item) =>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
size:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
children: items.map((item) => {
|
|
56
|
+
const isSelected = item.id === selectedId;
|
|
57
|
+
return /* @__PURE__ */ jsxs(StyledSwitcherInputItem, {
|
|
58
|
+
onClick: item.onClick,
|
|
59
|
+
$isSelected: isSelected,
|
|
60
|
+
$size: size,
|
|
61
|
+
children: [item.icon && /* @__PURE__ */ jsx(FlexItem, {
|
|
62
|
+
shrink: 0,
|
|
63
|
+
grow: 0,
|
|
64
|
+
children: /* @__PURE__ */ jsx(Icon, {
|
|
65
|
+
component: item.icon,
|
|
66
|
+
size: getInputIconSize(size),
|
|
67
|
+
variant: isSelected ? IconVariant.PRIMARY_ALT : IconVariant.SECONDARY
|
|
68
|
+
})
|
|
69
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
70
|
+
size: getInputTextSize(size),
|
|
71
|
+
variant: isSelected ? TextVariant.PRIMARY_ALT : TextVariant.SECONDARY,
|
|
72
|
+
weight: isSelected ? TextWeight.MEDIUM : TextWeight.REGULAR,
|
|
73
|
+
cursor: "pointer",
|
|
74
|
+
children: item.label
|
|
75
|
+
})]
|
|
76
|
+
}, item.id);
|
|
77
|
+
})
|
|
61
78
|
});
|
|
62
79
|
};
|
|
63
80
|
//#endregion
|
package/dist/styles.css
CHANGED
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
.salrebx{position:absolute;left:var(--salrebx-0);top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--salrebx-1);height:var(--salrebx-1);background:var(--salrebx-2);border-radius:50%;cursor:var(--salrebx-3);-webkit-transition:var(--salrebx-4);transition:var(--salrebx-4);z-index:3;pointer-events:var(--salrebx-5);}.salrebx:active{cursor:var(--salrebx-6);-webkit-transform:translate(-50%, -50%) scale(1.1);-moz-transform:translate(-50%, -50%) scale(1.1);-ms-transform:translate(-50%, -50%) scale(1.1);transform:translate(-50%, -50%) scale(1.1);}.salrebx:hover{-webkit-transform:var(--salrebx-7);-moz-transform:var(--salrebx-7);-ms-transform:var(--salrebx-7);transform:var(--salrebx-7);}
|
|
124
124
|
.h1trli0w{position:absolute;opacity:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer;z-index:2;}
|
|
125
125
|
.sx2momv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sx2momv-0);border:0.5px solid var(--sx2momv-1);border-radius:5px;padding:var(--sx2momv-2);height:var(--sx2momv-3);}
|
|
126
|
-
.s1pe4aqp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:
|
|
126
|
+
.s1pe4aqp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--s1pe4aqp-0);padding:var(--s1pe4aqp-1);background:var(--s1pe4aqp-2);cursor:pointer;border:0.5px solid var(--s1pe4aqp-3);border-radius:4px;}
|
|
127
127
|
.s1jhbbpd{outline:none;resize:none;min-height:var(--s1jhbbpd-0);width:var(--s1jhbbpd-1);height:var(--s1jhbbpd-2);-webkit-flex:var(--s1jhbbpd-3);-ms-flex:var(--s1jhbbpd-3);flex:var(--s1jhbbpd-3);background-color:var(--s1jhbbpd-4);border:0.5px solid var(--s1jhbbpd-5);border-radius:4px;color:var(--s1jhbbpd-6);font-size:var(--s1jhbbpd-7);line-height:var(--s1jhbbpd-8);font-weight:var(--s1jhbbpd-9);font-family:var(--s1jhbbpd-10);padding:var(--s1jhbbpd-11);-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1jhbbpd:hover:not(:disabled, :focus){border-color:var(--s1jhbbpd-12);}.s1jhbbpd:focus{border-color:var(--s1jhbbpd-13);}.s1jhbbpd:disabled{cursor:not-allowed;opacity:0.6;}.s1jhbbpd::-webkit-input-placeholder{color:var(--s1jhbbpd-14);}.s1jhbbpd::-moz-placeholder{color:var(--s1jhbbpd-14);}.s1jhbbpd:-ms-input-placeholder{color:var(--s1jhbbpd-14);}.s1jhbbpd::placeholder{color:var(--s1jhbbpd-14);}
|
|
128
128
|
.tu0hnok{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:var(--tu0hnok-0);height:var(--tu0hnok-1);}
|
|
129
129
|
.l48iv0n{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:4px;min-height:var(--l48iv0n-0);width:var(--l48iv0n-1);height:var(--l48iv0n-2);-webkit-flex:var(--l48iv0n-3);-ms-flex:var(--l48iv0n-3);flex:var(--l48iv0n-3);background-color:var(--l48iv0n-4);border:0.5px solid var(--l48iv0n-5);border-radius:4px;padding:var(--l48iv0n-6);}
|