@homebound/beam 2.202.1 → 2.204.0

package/dist/components/Tag.d.ts

@@ -1,3 +1,4 @@
+import { IconKey } from "./";
 import { Margin, Only, Xss } from "../Css";
 declare type TagXss = Margin;
 export declare type TagType = "info" | "caution" | "warning" | "success" | "neutral";
@@ -5,6 +6,7 @@ interface TagProps<X> {
     text: string;
     type?: TagType;
     xss?: X;
+    icon?: IconKey;
 }
 /** Tag used for indicating a status */
 export declare function Tag<X extends Only<Xss<TagXss>, X>>({ text, type, xss, ...otherProps }: TagProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Tag.js

@@ -2,25 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const components_1 = require("./");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 /** Tag used for indicating a status */
 function Tag({ text, type, xss, ...otherProps }) {
     const typeStyles = getStyles(type);
     const tid = (0, utils_1.useTestIds)(otherProps);
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, tid, { css: { ...Css_1.Css.dib.tinySb.ttu.px1.pyPx(4).gray900.br4.$, ...typeStyles, ...xss }, title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({}, tid, { css: { ...Css_1.Css.dif.tinySb.ttu.aic.gapPx(4).pxPx(6).pyPx(2).gray900.br4.$, ...typeStyles, ...xss }, title: text }, { children: [otherProps.icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: otherProps.icon, inc: 1.5 }, void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0)] }), void 0));
 }
 exports.Tag = Tag;
 function getStyles(type) {
     switch (type) {
         case "info":
-            return Css_1.Css.bgLightBlue200.$;
+            return Css_1.Css.bgLightBlue100.$;
         case "caution":
-            return Css_1.Css.bgYellow600.$;
+            return Css_1.Css.bgYellow200.$;
         case "warning":
             return Css_1.Css.bgRed100.$;
         case "success":
-            return Css_1.Css.bgGreen300.$;
+            return Css_1.Css.bgGreen100.$;
         default:
             // Neutral case
             return Css_1.Css.bgGray200.$;

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useBreakpoint";
 export * from "./useComputed";
 export * from "./useGroupBy";
 export * from "./useHover";

package/dist/hooks/index.js

@@ -10,6 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useBreakpoint"), exports);
 __exportStar(require("./useComputed"), exports);
 __exportStar(require("./useGroupBy"), exports);
 __exportStar(require("./useHover"), exports);

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+import { BreakpointKey } from "../Css";
+/**
+ * A React hook to return a record of responsive breakpoints that updates on resize.
+ *
+ * @example
+ * const { breakpoints } = useBreakpoint();
+ * if(breakpoints.mdAndDown) {...do something cool}
+ */
+declare type BreakpointsType = Record<BreakpointKey, boolean>;
+export declare const useBreakpoint: () => BreakpointsType;
+export {};

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
+const react_1 = require("react");
+const use_debounce_1 = require("use-debounce");
+const Css_1 = require("../Css");
+const useBreakpoint = () => {
+    const [breakpoints, setBreakpoints] = (0, react_1.useState)(matchMediaBreakpoints());
+    const handleResize = (0, use_debounce_1.useDebouncedCallback)(() => {
+        const newBps = matchMediaBreakpoints();
+        if ((0, fast_deep_equal_1.default)(breakpoints, newBps))
+            return;
+        setBreakpoints(newBps);
+    }, 1000);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("resize", handleResize);
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return breakpoints;
+};
+exports.useBreakpoint = useBreakpoint;
+function matchMediaBreakpoints() {
+    let bps = {};
+    Object.entries(Css_1.Breakpoints).forEach(([name, bp]) => {
+        bps[name] = window.matchMedia(bp.replace("@media ", "")).matches;
+    });
+    return bps;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.202.1",
+  "version": "2.204.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",