@homebound/beam 2.327.1 → 2.329.0
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,14 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { LabelHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import { Font, Only, Xss } from "../Css";
|
|
3
|
+
type LabelXss = Font | "color";
|
|
4
|
+
interface LabelProps<X> {
|
|
3
5
|
labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
|
|
4
6
|
label: string;
|
|
5
7
|
suffix?: string;
|
|
6
8
|
hidden?: boolean;
|
|
7
9
|
contrast?: boolean;
|
|
8
10
|
multiline?: boolean;
|
|
11
|
+
tooltip?: ReactNode;
|
|
12
|
+
inline?: boolean;
|
|
13
|
+
xss?: X;
|
|
9
14
|
}
|
|
10
15
|
/** An internal helper component for rendering form labels. */
|
|
11
|
-
|
|
16
|
+
declare function LabelComponent<X extends Only<Xss<LabelXss>, X>>(props: LabelProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const Label: typeof LabelComponent;
|
|
18
|
+
type InlineLabelProps = Omit<LabelProps<unknown>, "xss" | "inline">;
|
|
12
19
|
/** Used for showing labels within text fields. */
|
|
13
|
-
export declare function InlineLabel({ labelProps, label, contrast, multiline, ...others }:
|
|
20
|
+
export declare function InlineLabel({ labelProps, label, contrast, multiline, ...others }: InlineLabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
14
21
|
export {};
|
package/dist/components/Label.js
CHANGED
|
@@ -8,12 +8,14 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const react_aria_1 = require("react-aria");
|
|
10
10
|
const Css_1 = require("../Css");
|
|
11
|
+
const src_1 = require("..");
|
|
11
12
|
/** An internal helper component for rendering form labels. */
|
|
12
|
-
|
|
13
|
-
const { labelProps, label, hidden, suffix, contrast = false, ...others } = props;
|
|
14
|
-
const labelEl = ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.
|
|
13
|
+
function LabelComponent(props) {
|
|
14
|
+
const { labelProps, label, hidden, suffix, contrast = false, tooltip, inline, xss, ...others } = props;
|
|
15
|
+
const labelEl = ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: { ...Css_1.Css.dif.aic.gap1.sm.gray700.mbPx(inline ? 0 : 4).if(contrast).white.$, ...xss }, children: [label, suffix && ` ${suffix}`, tooltip && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(src_1.Icon, { icon: "infoCircle", tooltip: tooltip, inc: 2, color: contrast ? Css_1.Palette.White : Css_1.Palette.Gray700 }) }))] }));
|
|
15
16
|
return hidden ? (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: labelEl }) : labelEl;
|
|
16
|
-
}
|
|
17
|
+
}
|
|
18
|
+
exports.Label = react_1.default.memo(LabelComponent);
|
|
17
19
|
/** Used for showing labels within text fields. */
|
|
18
20
|
function InlineLabel({ labelProps, label, contrast, multiline = false, ...others }) {
|
|
19
21
|
return ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.smMd.nowrap.gray900.prPx(4).add("color", "currentColor").asc.if(multiline).asfs.pt1.$, children: [label, ":"] }));
|
package/dist/components/Tag.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconKey } from "./";
|
|
2
2
|
import { Margin, Only, Xss } from "../Css";
|
|
3
|
-
type TagXss = Margin;
|
|
3
|
+
type TagXss = Margin | "backgroundColor" | "color";
|
|
4
4
|
export type TagType = "info" | "caution" | "warning" | "success" | "neutral";
|
|
5
5
|
interface TagProps<X> {
|
|
6
6
|
text: string;
|
package/dist/inputs/Switch.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export interface SwitchProps {
|
|
|
9
9
|
/** Input label */
|
|
10
10
|
label: string;
|
|
11
11
|
/** Where to put the label. */
|
|
12
|
-
labelStyle?: "form" | "inline" | "filter" | "hidden" | "left";
|
|
12
|
+
labelStyle?: "form" | "inline" | "filter" | "hidden" | "left" | "centered";
|
|
13
13
|
/** Whether or not to hide the label */
|
|
14
14
|
hideLabel?: boolean;
|
|
15
15
|
/** Handler when the interactive element state changes. */
|
|
@@ -18,6 +18,8 @@ export interface SwitchProps {
|
|
|
18
18
|
selected: boolean;
|
|
19
19
|
/** Whether to include icons like the check mark */
|
|
20
20
|
withIcon?: boolean;
|
|
21
|
+
/** Adds tooltip for the switch */
|
|
22
|
+
tooltip?: ReactNode;
|
|
21
23
|
}
|
|
22
24
|
export declare function Switch(props: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
23
25
|
export declare const switchHoverStyles: {
|
package/dist/inputs/Switch.js
CHANGED
|
@@ -18,33 +18,27 @@ function Switch(props) {
|
|
|
18
18
|
const { inputProps } = (0, react_aria_1.useSwitch)({ ...ariaProps, "aria-label": label }, state, ref);
|
|
19
19
|
const { isFocusVisible: isKeyboardFocus, focusProps } = (0, react_aria_1.useFocusRing)(otherProps);
|
|
20
20
|
const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
|
|
21
|
-
const tooltip = (0, components_1.resolveTooltip)(disabled);
|
|
22
|
-
return (0,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
...(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
...(isSelected && switchCircleSelectedStyles(compact)),
|
|
43
|
-
}, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", { css: {
|
|
44
|
-
// LineHeight is conditionally applied to handle compact version text alignment
|
|
45
|
-
...Css_1.Css.if(compact).add("lineHeight", "1").$,
|
|
46
|
-
}, children: label })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps }) })] })),
|
|
47
|
-
});
|
|
21
|
+
const tooltip = (0, components_1.resolveTooltip)(disabled, props.tooltip);
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ...hoverProps, css: {
|
|
23
|
+
...Css_1.Css.relative.cursorPointer.df.w("max-content").selectNone.$,
|
|
24
|
+
...(labelStyle === "form" && Css_1.Css.fdc.$),
|
|
25
|
+
...(labelStyle === "left" && Css_1.Css.w100.aic.$),
|
|
26
|
+
...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
|
|
27
|
+
...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.wa.sm.$),
|
|
28
|
+
...(labelStyle === "centered" && Css_1.Css.fdc.aic.$),
|
|
29
|
+
...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
|
|
30
|
+
}, children: [labelStyle !== "inline" && labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, xss: Css_1.Css.if(labelStyle === "filter").gray900.$, inline: labelStyle === "left" || labelStyle === "filter" }) })), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
|
|
31
|
+
...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
|
|
32
|
+
...(isHovered && exports.switchHoverStyles),
|
|
33
|
+
...(isKeyboardFocus && exports.switchFocusStyles),
|
|
34
|
+
...(isDisabled && Css_1.Css.bgGray300.$),
|
|
35
|
+
...(isSelected && Css_1.Css.bgBlue700.$),
|
|
36
|
+
...(isSelected && isHovered && exports.switchSelectedHoverStyles),
|
|
37
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { css: {
|
|
38
|
+
...switchCircleDefaultStyles(compact),
|
|
39
|
+
...(isDisabled && Css_1.Css.bgGray100.$),
|
|
40
|
+
...(isSelected && switchCircleSelectedStyles(compact)),
|
|
41
|
+
}, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.Blue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, tooltip: tooltip, inline: true, xss: Css_1.Css.smMd.gray900.if(compact).add("lineHeight", "1").$ })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps }) })] }));
|
|
48
42
|
}
|
|
49
43
|
exports.Switch = Switch;
|
|
50
44
|
/** Styles */
|