braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Toggle/Toggle.mjs

@@ -0,0 +1,164 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box } from "../Box/Box.mjs";
+import { FieldOverlay } from "../private/FieldOverlay/FieldOverlay.mjs";
+import { Text } from "../Text/Text.mjs";
+import { virtualTouchable } from "../private/touchable/virtualTouchable.mjs";
+import { useBackgroundLightness } from "../Box/BackgroundContext.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { root, realField, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, hideBorderOnDarkBackgroundInLightMode, icon, focusOverlay, hoverOverlay, label } from "./Toggle.css.mjs";
+import { IconTick } from "../icons/IconTick/IconTick.mjs";
+const handleChange = (onChange) => (event) => {
+  if (typeof onChange === "function") {
+    onChange(event.target.checked);
+  }
+};
+const Toggle = forwardRef(
+  ({
+    id,
+    on,
+    onChange,
+    label: label$1,
+    align = "left",
+    size = "standard",
+    data,
+    ...restProps
+  }, forwardedRef) => {
+    const lightness = useBackgroundLightness();
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        position: "relative",
+        zIndex: 0,
+        display: "flex",
+        flexDirection: align === "left" ? void 0 : "rowReverse",
+        className: root,
+        ...buildDataAttributes({ data, validateRestProps: restProps }),
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "input",
+              type: "checkbox",
+              id,
+              checked: on,
+              onChange: handleChange(onChange),
+              position: "absolute",
+              zIndex: 1,
+              cursor: "pointer",
+              opacity: 0,
+              className: [
+                realField,
+                realFieldPosition[size],
+                fieldSize[size]
+              ],
+              ref: forwardedRef
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              flexShrink: 0,
+              className: [
+                slideContainer,
+                slideContainerSize[size],
+                fieldSize[size]
+              ],
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    position: "absolute",
+                    width: "full",
+                    overflow: "hidden",
+                    borderRadius: "full",
+                    className: [
+                      slideTrack[size],
+                      slideTrackMask,
+                      slideTrackBgLightMode[lightness.lightMode],
+                      slideTrackBgDarkMode[lightness.darkMode]
+                    ],
+                    children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        position: "absolute",
+                        width: "full",
+                        height: "full",
+                        background: "formAccent",
+                        transition: "fast",
+                        className: slideTrackSelected
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    position: "absolute",
+                    background: "surface",
+                    transition: "fast",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "full",
+                    className: slider[size],
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        FieldOverlay,
+                        {
+                          variant: on ? "formAccent" : "default",
+                          borderRadius: "full",
+                          visible: true,
+                          className: {
+                            [hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(FieldOverlay, { className: icon, children: /* @__PURE__ */ jsx(IconTick, { tone: "formAccent", size: "fill" }) }),
+                      /* @__PURE__ */ jsx(
+                        FieldOverlay,
+                        {
+                          variant: "focus",
+                          borderRadius: "full",
+                          className: focusOverlay
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        FieldOverlay,
+                        {
+                          variant: "formAccent",
+                          borderRadius: "full",
+                          className: !on ? hoverOverlay : void 0
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "label",
+              htmlFor: id,
+              paddingLeft: align === "left" ? "xsmall" : void 0,
+              paddingRight: align === "right" || align === "justify" ? "xsmall" : void 0,
+              flexGrow: align === "justify" ? 1 : void 0,
+              userSelect: "none",
+              cursor: "pointer",
+              className: [label[size], virtualTouchable()],
+              children: /* @__PURE__ */ jsx(Text, { baseline: false, weight: on ? "strong" : void 0, size, children: label$1 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  Toggle
+};

package/dist/lib/components/Toggle/Toggle.playroom.cjs

@@ -0,0 +1,30 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_playroomState_cjs = require("../../playroom/playroomState.cjs");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_Toggle_Toggle_cjs = require("./Toggle.cjs");
+const Toggle = ({
+  id,
+  stateName,
+  on,
+  onChange,
+  ...restProps
+}) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  const [state, handleChange] = lib_playroom_playroomState_cjs.useFallbackState(
+    stateName,
+    on,
+    onChange,
+    false
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Toggle_Toggle_cjs.Toggle,
+    {
+      id: id ?? fallbackId,
+      on: state,
+      onChange: handleChange,
+      ...restProps
+    }
+  );
+};
+exports.Toggle = Toggle;

package/dist/lib/components/Toggle/Toggle.playroom.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackState } from "../../playroom/playroomState.mjs";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { Toggle as Toggle$1 } from "./Toggle.mjs";
+const Toggle = ({
+  id,
+  stateName,
+  on,
+  onChange,
+  ...restProps
+}) => {
+  const fallbackId = useFallbackId();
+  const [state, handleChange] = useFallbackState(
+    stateName,
+    on,
+    onChange,
+    false
+  );
+  return /* @__PURE__ */ jsx(
+    Toggle$1,
+    {
+      id: id ?? fallbackId,
+      on: state,
+      onChange: handleChange,
+      ...restProps
+    }
+  );
+};
+export {
+  Toggle
+};

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -0,0 +1,252 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactPopperTooltip = require("react-popper-tooltip");
+const isMobile = require("is-mobile");
+const assert = require("assert");
+const lib_components_BraidPortal_BraidPortal_cjs = require("../BraidPortal/BraidPortal.cjs");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_components_private_defaultTextProps_cjs = require("../private/defaultTextProps.cjs");
+const lib_components_useSpace_useSpace_cjs = require("../useSpace/useSpace.cjs");
+const lib_components_useThemeName_useThemeName_cjs = require("../useThemeName/useThemeName.cjs");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_TooltipRenderer_TooltipRenderer_css_cjs = require("./TooltipRenderer.css.cjs");
+const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../hooks/useIsomorphicLayoutEffect.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const isMobile__default = /* @__PURE__ */ _interopDefaultCompat(isMobile);
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const StaticTooltipContext = React.createContext(false);
+const TooltipTextDefaultsProvider = ({
+  children
+}) => {
+  const themeName = lib_components_useThemeName_useThemeName_cjs.useThemeName();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_private_defaultTextProps_cjs.DefaultTextPropsProvider,
+    {
+      size: themeName === "docs" ? "small" : void 0,
+      weight: "medium",
+      children
+    }
+  );
+};
+const borderRadius = "large";
+const TooltipContent = ({
+  children,
+  opacity,
+  arrowProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_Box_Box_cjs.Box,
+  {
+    display: "flex",
+    position: "relative",
+    transition: "fast",
+    opacity: opacity === 0 ? 0 : void 0,
+    className: opacity === 0 ? lib_components_TooltipRenderer_TooltipRenderer_css_cjs.verticalOffsetBeforeEntrance : lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_Box_Box_cjs.Box,
+      {
+        boxShadow: "large",
+        background: "neutral",
+        borderRadius,
+        padding: "small",
+        className: [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
+        children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { position: "relative", zIndex: 1, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              ...arrowProps,
+              borderRadius,
+              background: "neutral",
+              className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow
+            }
+          )
+        ] })
+      }
+    )
+  }
+);
+const validPlacements = ["top", "bottom"];
+const normaliseRect = (domRect) => ({
+  top: Math.round((domRect == null ? void 0 : domRect.top) || 0),
+  left: Math.round((domRect == null ? void 0 : domRect.left) || 0),
+  height: Math.round((domRect == null ? void 0 : domRect.height) || 0),
+  width: Math.round((domRect == null ? void 0 : domRect.width) || 0)
+});
+const defaultRect = normaliseRect();
+const doesBoundingBoxNeedUpdating = (element, previousRect) => {
+  const currentRect = normaliseRect(element == null ? void 0 : element.getBoundingClientRect());
+  return JSON.stringify(currentRect) !== JSON.stringify(previousRect);
+};
+const TooltipRenderer = ({
+  id,
+  tooltip,
+  placement = "top",
+  children
+}) => {
+  assert__default.default(
+    validPlacements.includes(placement),
+    `The 'placement' prop must be one of the following: ${validPlacements.join(
+      ", "
+    )}`
+  );
+  const isStatic = React.useContext(StaticTooltipContext);
+  const [controlledVisible, setControlledVisible] = React.useState(false);
+  const [opacity, setOpacity] = React.useState(0);
+  const { grid, space } = lib_components_useSpace_useSpace_cjs.useSpace();
+  const triggerBoundingBoxRef = React.useRef(defaultRect);
+  const tooltipBoundingRectRef = React.useRef(defaultRect);
+  const {
+    visible,
+    getTooltipProps,
+    setTooltipRef,
+    tooltipRef,
+    setTriggerRef,
+    triggerRef,
+    getArrowProps,
+    update
+  } = reactPopperTooltip.usePopperTooltip(
+    {
+      placement,
+      trigger: [isMobile__default.default() ? "click" : "hover", "focus"],
+      visible: isStatic || controlledVisible,
+      onVisibleChange: (newState) => {
+        triggerBoundingBoxRef.current = normaliseRect(
+          triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
+        );
+        tooltipBoundingRectRef.current = normaliseRect(
+          tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
+        );
+        setControlledVisible(newState);
+      }
+    },
+    {
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: {
+            padding: space.xsmall * grid
+          }
+        },
+        {
+          name: "offset",
+          options: {
+            offset: [0, space.small * grid]
+          }
+        },
+        {
+          name: "arrow",
+          options: {
+            padding: space.xsmall * grid
+          }
+        },
+        ...isStatic ? [
+          {
+            name: "flip",
+            options: {
+              fallbackPlacements: []
+            }
+          }
+        ] : []
+      ]
+    }
+  );
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    if (controlledVisible && update && (doesBoundingBoxNeedUpdating(triggerRef, triggerBoundingBoxRef.current) || doesBoundingBoxNeedUpdating(tooltipRef, tooltipBoundingRectRef.current))) {
+      triggerBoundingBoxRef.current = normaliseRect(
+        triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
+      );
+      tooltipBoundingRectRef.current = normaliseRect(
+        tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
+      );
+      update();
+    }
+  });
+  React.useEffect(() => {
+    if (visible) {
+      const handleKeyDown = ({ key }) => {
+        if (key === "Escape") {
+          setControlledVisible(false);
+        }
+      };
+      const handleScroll = () => {
+        setControlledVisible(false);
+      };
+      const scrollHandlerOptions = {
+        capture: true,
+        passive: true
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      document.addEventListener("scroll", handleScroll, scrollHandlerOptions);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener(
+          "scroll",
+          handleScroll,
+          scrollHandlerOptions
+        );
+      };
+    }
+  }, [visible]);
+  React.useEffect(() => {
+    if (!triggerRef) {
+      return;
+    }
+    if (visible) {
+      const handleFocusIn = (event) => {
+        if (event.currentTarget !== triggerRef) {
+          setControlledVisible(false);
+        }
+      };
+      document.addEventListener("focusin", handleFocusIn);
+      return () => {
+        document.removeEventListener("focusin", handleFocusIn);
+      };
+    }
+  }, [triggerRef, visible]);
+  assert__default.default(
+    React.useEffect(() => {
+      if (tooltipRef) {
+        assert__default.default(
+          tooltipRef.querySelectorAll("button, input, select, textarea, a").length === 0,
+          "For accessibility reasons, tooltips must not contain interactive elements"
+        );
+      }
+    }, [tooltipRef]) === void 0
+  );
+  React.useEffect(() => {
+    if (!tooltipRef || !visible) {
+      return setOpacity(0);
+    }
+    const timeout = setTimeout(() => setOpacity(100), isMobile__default.default() ? 0 : 250);
+    return () => clearTimeout(timeout);
+  }, [tooltipRef, visible]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children({
+      triggerProps: {
+        tabIndex: 0,
+        ref: setTriggerRef,
+        "aria-describedby": id
+      }
+    }),
+    triggerRef && /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidPortal_BraidPortal_cjs.BraidPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id,
+        role: "tooltip",
+        hidden: !visible ? true : void 0,
+        className: lib_css_atoms_atoms_cjs.atoms({
+          reset: "div",
+          zIndex: "notification",
+          pointerEvents: "none",
+          display: triggerRef && visible ? void 0 : "none"
+        }),
+        ...visible ? getTooltipProps({
+          ref: setTooltipRef
+        }) : null,
+        children: /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { opacity, arrowProps: getArrowProps(), children: tooltip })
+      }
+    ) })
+  ] });
+};
+exports.TooltipRenderer = TooltipRenderer;

package/dist/lib/components/TooltipRenderer/TooltipRenderer.css.cjs

@@ -0,0 +1,60 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
+const constants = {
+  maxWidth: "260px",
+  arrowSize: "12px"
+};
+const maxWidth = css.style({
+  maxWidth: constants.maxWidth
+}, "maxWidth");
+const verticalOffsetBeforeEntrance = css.style({
+  transform: "translateZ(0) translateY(4px)",
+  selectors: {
+    "[data-popper-placement^=bottom] &": {
+      transform: "translateZ(0) translateY(-4px)"
+    }
+  }
+}, "verticalOffsetBeforeEntrance");
+const translateZ0 = css.style({
+  transform: "translateZ(0)"
+}, "translateZ0");
+const borderRadius = lib_themes_vars_css_cjs.vars.borderRadius.small;
+const offset = cssUtils.calc(constants.arrowSize).divide(2).negate().toString();
+const arrow = css.style({
+  visibility: "hidden",
+  ":before": {
+    visibility: "visible",
+    content: "''",
+    transform: "rotate(45deg)"
+  },
+  selectors: {
+    "&, &::before": {
+      width: cssUtils.calc.add(constants.arrowSize, cssUtils.calc.multiply(borderRadius, 2)),
+      height: cssUtils.calc.add(constants.arrowSize, cssUtils.calc.multiply(borderRadius, 2)),
+      position: "absolute",
+      background: "inherit",
+      borderRadius
+    },
+    "[data-popper-placement^=top] &": {
+      bottom: offset
+    },
+    "[data-popper-placement^=bottom] &": {
+      top: offset
+    },
+    "[data-popper-placement^=left] &": {
+      right: offset
+    },
+    "[data-popper-placement^=right] &": {
+      left: offset
+    }
+  }
+}, "arrow");
+__vanilla_filescope__.endFileScope();
+exports.arrow = arrow;
+exports.maxWidth = maxWidth;
+exports.translateZ0 = translateZ0;
+exports.verticalOffsetBeforeEntrance = verticalOffsetBeforeEntrance;