@homebound/beam 2.282.0 → 2.283.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,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { Margin, Only, Xss } from "../Css";
|
|
3
|
-
type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral" | "darkMode";
|
|
3
|
+
export type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral" | "darkMode" | "info";
|
|
4
4
|
export declare const ChipTypes: Record<ChipType, ChipType>;
|
|
5
5
|
export interface ChipProps<X> {
|
|
6
6
|
text: string;
|
|
@@ -10,5 +10,4 @@ export interface ChipProps<X> {
|
|
|
10
10
|
compact?: boolean;
|
|
11
11
|
}
|
|
12
12
|
/** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
|
|
13
|
-
export declare function Chip<X extends Only<Xss<Margin>, X>>({ type, ...props }: ChipProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
14
|
-
export {};
|
|
13
|
+
export declare function Chip<X extends Only<Xss<Margin | "color" | "backgroundColor">, X>>({ type, ...props }: ChipProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
|
package/dist/components/Chip.js
CHANGED
|
@@ -15,6 +15,7 @@ exports.ChipTypes = {
|
|
|
15
15
|
dark: "dark",
|
|
16
16
|
neutral: "neutral",
|
|
17
17
|
darkMode: "darkMode",
|
|
18
|
+
info: "info",
|
|
18
19
|
};
|
|
19
20
|
/** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
|
|
20
21
|
function Chip({ type = exports.ChipTypes.neutral, ...props }) {
|
|
@@ -40,4 +41,5 @@ const typeStyles = {
|
|
|
40
41
|
dark: Css_1.Css.bgGray900.white.$,
|
|
41
42
|
neutral: Css_1.Css.bgGray200.$,
|
|
42
43
|
darkMode: Css_1.Css.bgGray700.white.$,
|
|
44
|
+
info: Css_1.Css.bgLightBlue100.$,
|
|
43
45
|
};
|
|
@@ -7,6 +7,7 @@ export interface ChipValue {
|
|
|
7
7
|
export interface ChipsProps<X> {
|
|
8
8
|
values: string[] | ChipValue[];
|
|
9
9
|
xss?: X;
|
|
10
|
+
compact?: boolean;
|
|
10
11
|
}
|
|
11
12
|
/** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */
|
|
12
13
|
export declare function Chips<X extends Only<ChipsXss, X>>(props: ChipsProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
|
package/dist/components/Chips.js
CHANGED
|
@@ -8,14 +8,14 @@ const Css_1 = require("../Css");
|
|
|
8
8
|
/** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */
|
|
9
9
|
function Chips(props) {
|
|
10
10
|
const { wrap } = (0, PresentationContext_1.usePresentationContext)();
|
|
11
|
-
const { values, xss = {} } = props;
|
|
11
|
+
const { values, compact, xss = {} } = props;
|
|
12
12
|
return ((0, jsx_runtime_1.jsx)("div", { css: {
|
|
13
13
|
...Css_1.Css.df.aifs.gap1.whiteSpace("normal").$,
|
|
14
14
|
...(wrap !== false ? Css_1.Css.add({ flexWrap: "wrap" }).$ : {}),
|
|
15
15
|
...xss,
|
|
16
16
|
}, children: values.map((value, i) => {
|
|
17
17
|
const { text, title } = (value.hasOwnProperty("text") ? value : { text: value });
|
|
18
|
-
return (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: text, title: title }, i);
|
|
18
|
+
return (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: text, title: title, compact: compact }, i);
|
|
19
19
|
}) }));
|
|
20
20
|
}
|
|
21
21
|
exports.Chips = Chips;
|